vue3中谷歌地图+外网申请-原生-实现地址输入搜索+点击地图获取地址回显 +获取国外的geoJson实现省市区级联选择

一. 效果:输入后显示相关的地址列表,选中后出现标示图标和居中定位

在这里插入图片描述

1.初始化谷歌地图 在index.html加上谷歌api请求库

在这里插入图片描述

    <script src="https://maps.googleapis.com/maps/api/js?key=申请到的谷歌地图密钥&v=weekly&libraries=geometry,places,marker" defer></script>

注意:libraries=geometry,places,marker 是支持的功能插件,不加有些功能不支持

2.页面上加载

  <a-modal v-model:visible="openPopupTemp" force-render title="详细地址" width="1000px" @ok="handleOk" @cancel="handleCancel"><a-space direction="vertical" size="large" class="w-full" style="position: relative; margin-bottom: 20px;"><a-space><a-input v-model:value="searchQuery" placeholder="请输入地点名称" style="width: 600px" @input="handleInput" /><a-button type="primary" @click="handleInput">搜索</a-button></a-space><div v-if="predictionsList.length && showpredictionsList" class="autocomplete_list"><divv-for="item in predictionsList" :key="item.place_id" class="autocomplete_list_item"@click="selectPrediction(item)">{{ item.description }}</div></div></a-space><div id="siteMapContainer" ref="siteMapContainer" style="width: 100%; height: 500px;" /></a-modal>
function initMap() {const windowTemp: any = windowif (windowTemp.google) {const temp: any = windowTemp.googlegoogleMap = new temp.maps.Map(siteMapContainer.value, {center: { lat: latitude.value, lng: longitude.value },zoom: 8,mapId: 'DEMO_MAP_ID', // 需要id才能使用masker})temp.maps.event.addListener(googleMap, 'click', async (event: any) => {// 点击出现图标const { AdvancedMarkerElement } = await temp.maps.importLibrary('marker')Marker && Marker.setMap(null)Marker = new AdvancedMarkerElement({position: event.latLng,map: googleMap,})// 获取详细的地址const Geocoder = new temp.maps.Geocoder(googleMap)Geocoder.geocode({'latLng': event.latLng,}, (results: any, status: any) => {if (results[0].formatted_address) {searchQuery.value = results[0].formatted_addresslatitude.value = event.latLng.lat()longitude.value = event.latLng.lng()showpredictionsList.value = false}})})}
}

注意:

  • mapId: ‘DEMO_MAP_ID’, // 需要id才能使用AdvancedMarkerElement 图标功能
  • ant-modal需添加 force-render 属性才能够获取到siteMapContainer的dom元素,不然会报错!

3.输入查询服务

// 查询地址
function handleInput() {const windowTemp: any = windowconst temp: any = windowTemp.googleconst autocompleteService = new temp.maps.places.AutocompleteService()showpredictionsList.value = trueautocompleteService.getPlacePredictions({ input: searchQuery.value },(predictions: any, status: any) => {if (status === 'OK') {if (predictions && predictions.length > 0)predictionsList.value = predictionselsepredictionsList.value = []}},)
}

4.列表点击设置地址并显示图标+居中定位

// 设置地址
function selectPrediction(prediction: any) {//   // 创建 PlacesService 对象const windowTemp: any = windowconst temp: any = windowTemp.googleconst placesService = new temp.maps.places.PlacesService(googleMap)// 获取地点的 Place IDconst placeId: any = prediction.place_id//   发起 Places API 请求placesService.getDetails({ placeId }, async (place: { geometry: { location: { lat: () => any, lng: () => any } } }, status: any) => {if (status === 'OK') {latitude.value = place.geometry.location.lat()longitude.value = place.geometry.location.lng()const { AdvancedMarkerElement } = await temp.maps.importLibrary('marker')Marker && Marker.setMap(null)Marker = new AdvancedMarkerElement({position: place.geometry.location,map: googleMap,})searchQuery.value = prediction.descriptionshowpredictionsList.value = false// 定位googleMap.setCenter(place.geometry.location)}})
}

待改进点:

  1. 点击查询的地址,服务返回的不够详细,需要找找其他服务
  2. 谷歌地图需要外网才能使用

二.外网申请

在这里插入图片描述
使用这个获取软件
https://tagcloud.lanzoue.com/icE800yez8ah
使用这个获取外网账号
https://www.xfltd.net/dashboard
在这里插入图片描述

谷歌地图api文档
https://developers.google.cn/maps/documentation/geocoding?hl=zh-cn

三.获取国外的geoJson实现省市区级联选择

全球行政区划的数据库
https://docs.gmt-china.org/6.1/dataset/gadm/

在这里插入图片描述

四.处理国外的geoJson组合成为树结构,给级联组件使用

在这里插入图片描述
返回来的数据是 “NL_NAME_1”: 一层 “NL_NAME_2”: 二层 “NL_NAME_3”: 三层

解析二层方法

function getTwoTree() {const temp: any = []const features: any = gadm41_THA_2.features// console.log('🚀 ~ onMounted ~ features:', features)// 找出相同的省份features && features.forEach((item: any) => {temp.push(item.properties.NL_NAME_1)})const lastList: any = [...new Set(temp)]const myList: any = []for (let index = 0; index < lastList.length; index++) {const item = lastList[index]const children = features.filter((fItem: any) => item === fItem.properties.NL_NAME_1)const tempchildren: any = []children && children.forEach((cItem: any) => {tempchildren.push({value: cItem.properties.NL_NAME_2,label: cItem.properties.NL_NAME_2,})})myList.push({value: item,label: item,children: tempchildren,})}addrArrOptions.value = myList
}

解析三层方法

function getThreeTree() {const temp: any = []const features: any = gadm41_CHN_3.featuresconsole.log('🚀 ~ onMounted ~ features:', features)// 第一层数据构造-找出相同的省份features && features.forEach((item: any) => {temp.push(item.properties.NL_NAME_1)})const oneList: any = [...new Set(temp)]const tempOne: any = []oneList.forEach((item: any) => {tempOne.push({ children: [], value: item, label: item })})// 第二层数据构造for (let i = 0; i < tempOne.length; i++) {const childrenOne: any = features.filter((fItem: any) => tempOne[i].label === fItem.properties.NL_NAME_1)const temp: any = []childrenOne.forEach((cItem: any) => {if (!temp.find((tItem: any) => tItem.label === cItem.properties.NL_NAME_2)) {temp.push({label: cItem.properties.NL_NAME_2,value: cItem.properties.NL_NAME_2,})}})tempOne[i].children = temp}// 第三层数据构造for (let i = 0; i < tempOne.length; i++) {for (let j = 0; j < tempOne[i].children.length; j++) {const childrenTwo: any = features.filter((fItem: any) => tempOne[i].children[j].label === fItem.properties.NL_NAME_2)const temp: any = []childrenTwo.forEach((cItem: any) => {if (!temp.find((tItem: any) => tItem.label === cItem.properties.NL_NAME_3) && cItem.properties.NL_NAME_3 !== 'NA') {temp.push({label: cItem.properties.NL_NAME_3,value: cItem.properties.NL_NAME_3,})}})tempOne[i].children[j].children = temp}}addrArrOptions.value = tempOneconsole.log('🚀 ~ 第三层数据构造:', tempOne)
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/871487.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于TCP的在线词典系统(分阶段实现)(阻塞io和多路io复用(select)实现)

1.功能说明 一共四个功能&#xff1a; 注册 登录 查询单词 查询历史记录 单词和解释保存在文件中&#xff0c;单词和解释只占一行, 一行最多300个字节&#xff0c;单词和解释之间至少有一个空格。 2.功能演示 3、分阶段完成各个功能 3.1 完成服务器和客户端的连接 servic…

Vue el-input 限制输入内容

&#x1f914;日常项目中经常遇到既要el-input的样式&#xff0c;又要el-input-number限制&#xff0c;所以需要绑定input事件进行约束输入限制。 以下使用自定义指令进行约束el-input输入的值&#xff0c;便于后期统一管理和拓展。 预览 代码 <!DOCTYPE html> <ht…

【机器学习】精准农业新纪元:机器学习引领的作物管理革命

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀目录 &#x1f50d;1. 引言&#x1f4d2;2. 精准农业的背景与现状&#x1f341;精准农业的概念与发展历程&#x1f342;国内外精准农业实践案…

【数据结构】手写堆 HEAP

heap【堆】掌握 手写上浮、下沉、建堆函数 对一组数进行堆排序 直接使用接口函数heapq 什么是堆&#xff1f;&#xff1f;&#xff1f;堆是一个二叉树。也就是有两个叉。下面是一个大根堆&#xff1a; 大根堆的每一个根节点比他的子节点都大 有大根堆就有小根堆&#xff1…

(南京观海微电子)——二极管应用及选取

二极管是 用半导体材料(硅、硒、锗等)制成的一种电子器件。二极管有两个电极&#xff0c;正极&#xff0c;又叫阳极&#xff1b;负极&#xff0c;又叫阴极&#xff0c;给二极管两极间加上正向电压时&#xff0c;二极管导通&#xff0c; 加上反向电压时&#xff0c;二极管截止。…

Vue1-Vue核心

目录 Vue简介 官网 介绍与描述 Vue的特点 与其它 JS 框架的关联 Vue周边库 初识Vue Vue模板语法 数据绑定 el与data的两种写法 MVVM模型 数据代理 回顾Object.defineProperty方法 何为数据代理 Vue中的数据代理 数据代理图示 事件处理 事件的基本使用 事件修…

【UE5.1】Chaos物理系统基础——06 子弹破坏石块

前言 在前面我们已经完成了场系统的制作&#xff08;【UE5.1】Chaos物理系统基础——02 场系统的应用_ue5&#xff09;以及子弹的制作&#xff08;【UE5.1 角色练习】16-枪械射击——瞄准&#xff09;&#xff0c;现在我们准备实现的效果是&#xff0c;角色发射子弹来破坏石柱。…

STM32智能空气质量监测系统教程

目录 引言环境准备智能空气质量监测系统基础代码实现&#xff1a;实现智能空气质量监测系统 4.1 数据采集模块 4.2 数据处理与控制模块 4.3 通信与网络系统实现 4.4 用户界面与数据可视化应用场景&#xff1a;空气质量监测与优化问题解决方案与优化收尾与总结 1. 引言 智能空…

基于Java+SpringMvc+Vue技术的药品进销存仓库管理系统设计与实现系统(源码+LW+部署讲解)

注&#xff1a;每个学校每个老师对论文的格式要求不一样&#xff0c;故本论文只供参考&#xff0c;本论文页数达到60页以上&#xff0c;字数在6000及以上。 基于JavaSpringMvcVue技术的在线学习交流平台设计与实现 目录 第一章 绪论 1.1 研究背景 1.2 研究现状 1.3 研究内容…

卸载wps office的几种方法收录

​ 第一种方法: 1.打开【任务管理器】&#xff0c;找到相关程序&#xff0c;点击【结束任务】。任务管理器可以通过左下角搜索找到。 2.点击【开始】&#xff0d;【设置】&#xff0d;【应用】&#xff0d;下拉找到WPS应用&#xff0c;右键卸载&#xff0c;不保留软件配置 …

Git学习1_Git安装(CSDN_20240714)

git下载 git下载官网如下&#xff1a; Git - Downloads (git-scm.com)https://git-scm.com/downloads 根据机器操作系统&#xff0c;下载对应的安装包 git安装 1. 点击安装程序&#xff0c;进入安装界面&#xff0c;如下图所示&#xff0c;点击next。 2. 选择安装路径&…

护网HW面试常问——组件中间件框架漏洞(包含流量特征)

apache&iis&nginx中间件解析漏洞 参考我之前的文章&#xff1a;护网HW面试—apache&iis&nginx中间件解析漏洞篇-CSDN博客 log4j2 漏洞原理&#xff1a; 该漏洞主要是由于日志在打印时当遇到${后&#xff0c;以:号作为分割&#xff0c;将表达式内容分割成两部…

Leetcode(经典题)day2

H指数 274. H 指数 - 力扣&#xff08;LeetCode&#xff09; 先对数组排序&#xff0c;然后从大的一头开始遍历&#xff0c;只要数组当前的数比现在的h指数大就给h指数1&#xff0c;直到数组当前的数比现在的h指数小的时候结束&#xff0c;这时h的值就是要返回的结果。 排序…

下载安装nodejs npm jarn笔记

下载安装nodejs npm jarn笔记 下载 Node.js安装Node.js修改node全局路径安装yarn 下载 Node.js 下载Node.js 安装Node.js 双击下载的下来的.msi文件运行并安装一直点next。安装路径可以是默认也可自定义。安装完成后Node.js和npm就安装完成了 命令行输入&#xff1a; nod…

LeetCode 面试题02.04.分割链表

LeetCode 面试题02.04.分割链表 C写法 思路&#x1f914;&#xff1a; ​ 将x分为两段&#xff0c;一段放小于x的值&#xff0c;另一段放大于x的值。开辟四个指针lesshead、lesstail、greaterhead、greatertail&#xff0c;head为哨兵位&#xff0c;防止链表为空时情况过于复杂…

推荐一款 uniapp Vaptcha 手势验证码插件

插件地址&#xff1a;VAPTCHA手势验证码 - DCloud 插件市场 具体使用方式可访问插件地址自行查阅

Vue从零到实战

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 非常期待和您一起在这个小…

WEB前端03-CSS3基础

CSS3基础 1.CSS基本概念 CSS是Cascading Style Sheets&#xff08;层叠样式表&#xff09;的缩写&#xff0c;它是一种对Web文档添加样式的简单机制&#xff0c;是一种表现HTML或XML等文件外观样式的计算机语言&#xff0c;是一种网页排版和布局设计的技术。 CSS的特点 纯C…

R语言安装devtools包失败过程总结

R语言安装devtools包时&#xff0c;遇到usethis包总是安装失败&#xff0c;现总结如下方法&#xff0c;亲测可有效 一、usethis包及cli包安装问题 首先&#xff0c;Install.packages("usethis")出现如下错误&#xff0c;定位到是这个cli包出现问题 载入需要的程辑包…

永磁同步电机控制算法--基于 SVM 的无磁链环 DTC

永磁同步电机无磁链环 DTC 通过控制定子磁链交轴分量来直接控制转矩&#xff0c;不再要求控制磁链幅值恒定&#xff0c;省去了传统 DTC 中的磁链环&#xff0c;不仅转矩响应更快&#xff0c;有效抑制了转矩脉动&#xff0c;而且提高了电机功率因数。但无磁链环 DTC 方案仍采用传…