vue中使用腾讯地图选择地址

腾讯地图选择地址引发的一系列问题

2019/12/14更新
修复了自治区/直辖市无法选择的bug（比如上海之类的城市）
采用更加友好的方式来选择地址
新的文章链接：vue中使用腾讯地图选择地址（二）
不过新的文章多数都是代码，思路还是在这篇文章这里！

使用腾讯地图的地图组件，获取用户经纬度和当前地址

遇到的问题：

选择地址的回调路径不兼容哈希路由
回调后腾讯地图返回了完整的地址，而我需要省市区具体名称
获取省市区具体名称后，如何和后端的数据对上对应的 ID

腾讯地图相关文档

地图选点组件

申请腾讯地图的我就不多叙述，跟着提示申请即可

效果图：

开始使用

我采用的是地图 API 的第二种方式，跳转新的页面，通过回调路径把地址信息带回来我原先页面

于是代码如下：

let url = escape(`${window.location.origin}${window.location.pathname}/#/member/address_form?action=${this.$route.query.action}`
)
this.$router.go(-1)
window.location.href = `https://apis.map.qq.com/tools/locpicker?search=1&type=0&backurl=${url}&key=这里改成你的腾讯地图密钥&referer=这里是腾讯地图应用名称`

url 的处理
- 为什么需要这么麻烦的拼接呢?
  因为如果每次我都直接拿 window.location.href那么如果用户多次选择地址，使用 escape 转码的时候，会把路径的中文都转掉，可是我们并不需要每次都把腾讯地图带给我们的参数都重新放到回调地址中，所以就需要自己拼接路径
- 为什么需要 escape
  在 vue 中使用的是原来的哈希路由模式。即路径上会带上 #。这时候回调地址就不能识别了，就需要用到 escape

做了 url 处理，发现就可以跳转过去了。那第一步就成功了。解决了第一个问题：选择地址的回调路径不兼容哈希路由

问题 2. 需要省市区的名称

这是在地图上随便定的一个点。路径返回大概就是这些参数
包含了

name=印象家园酒店公寓%28 广园中路店%29&latng=23.15809,113.27209&addr=广东省广州市白云区广园中路 216 号&city=广州市&module=locationPicker

大概就是这样的：

{name: "详细的地址名称",latng: "选择的地址的经纬度",addr: "省市区+地方名",city: "城市名",module: "标识"
}

那么我需要处理的就是经纬度，还有省市区名称

直接上代码

var urlData = this.$route.query // 获取路径上的参数
var latng = urlData.latng.split(",") // 获取经纬度
var reg = /.+?(省|市|自治区|自治州|县|区)/g // 省市区的正则console.log(latng) // [23.15809,113.27209] 这个数组就是对应的经度纬度了
console.log(urlData.addr.match(reg)) // ['广东省','广州市','白云区']

和后端的数据对接

进过上面 2 步。经纬度，详细地址，省市区都已经拿到了。那就差和后端的数据匹配上了（这个操作见仁见智，不一定每个人都有）

后端数据大概长这样：

我要做的就是拿到中文名称，匹配出对应的 ID


methods:{/*** 递归方法，获取城市ID等* @param {Array} list 数据库中的地址列表（每次循环都会拿自己的child来匹配）* @param {Array} param 需要查找的省市区数组* @param {Number} level 当前遍历的深度* @param {Array} area_ids 当前已遍历找到的省市区ID数组* @return 对应的ID数组*/locationGhosts (list, param, level = 0, areaIds = []) {let child = []list.some(item => {if (param[level].indexOf(item.area_name) !== -1) {areaIds[level] = item.area_id // 存储ID，已经找到一个child = item.childreturn true}})// 判断不要改三目运算符，详情查看尾递归相关描述if (level === 2) {return areaIds} else {return this.locationGhosts(child, param, ++level, areaIds)}}
}// 调用递归，获取对应的省市区ID
let areaIds = this.locationGhosts(this.area_list, urlData.addr.match(reg), 0)areaIds[0] // 省份ID
areaIds[1] // 城市ID
areaIds[2] // 地区ID

至此，一个选择地址的功能就算是完美完成了！

vue中使用腾讯地图选择地址相关推荐

在vue中使用腾讯地图绘制围栏功能
首先,先看效果图里面包含了自定义多边形绘制围栏.圆形绘制以及矩形等方式,以及清除围栏经纬度的方法和获取围栏经纬度的方法. 首先在项目的index.html中引入腾讯地图 <script cha ...
在vue中使用腾讯地图
1. 引入腾讯地图在 index.html 中插入 <script charset="utf-8" src="https://map.qq.com/api/glj ...
在H5中使用腾讯地图,实现定位,距离计算,实时搜索,地址逆解析
在H5中使用腾讯地图,实现定位,距离计算,实时搜索,地址逆解析 1.创建应用 2.下载微信sdk包 3.安装`vue-jsonp` 4.使用获取当前位置信息,逆解析地址路线规划,距离计算实时搜索 ...
html调用腾讯地图定位当前位置,vue web项目中调用腾讯地图API获取当前位置的经纬度...
vue web项目中调用腾讯地图API获取当前位置的经纬度 vue web项目中调用腾讯地图API获取当前位置的经纬度在main.js 中添加一下代码 import axios from 'axio ...
vue中使用百度地图为啥是空白_vue中使用腾讯地图（尝试篇）
引入在index.html文件中引入腾讯地图js文件,XXX为你申请的key 注意事项:为显示地图的元素设置宽高单个标注点 js: 在mounted生命周期或者从后台接口获得信息后调用初始化地图方 ...
H5 高德、百度、腾讯地图选择导航功能实现
实现效果展示: 地图底图使用的是腾讯地图,实现步骤: 一.在腾讯地图申请密钥key值:申请地址:https://lbs.qq.com/dev/console/application/mine (有账号 ...
html5页面中添加腾讯地图api
html5页面中添加腾讯地图api: 点击地图出现详细的地图: 这是一个基于微信端的地图处理方案. 先看看html架构: <a id="aToMap" href=" ...
vue中，应用mapbox地图——地图组件mapbox-gl和语言包@mapbox/mapbox-gl-language地图英文转中文 accesstokens-访问令牌移动端地图-leaflet
vue中,应用mapbox地图--地图组件mapbox-gl和语言包@mapbox/mapbox-gl-language用于将地图上的英文转中文 & accesstokens-访问令牌 &am ...
在Vue中使用eCharts的地图图表，及生成自定义地图数据（乡镇级）
如何在Vue中使用eCharts的地图图表,及如何生成自定义地图数据(乡镇级) 文章目录一.在Vue使用ECharts地图功能二.生成地图数据 1.安装Bigemap 程序 2.生成需要的各乡镇地 ...