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

前言

使用地图选点组件引发的一系列问题：

1、选择地址的回调路径不兼容哈希路由

2、回调后腾讯地图返回了完整的地址，而用户需要省市区具体名称

3、获取省市区具体名称后，如何和后端的数据对上对应的 ID

相关文档

地图选点组件

效果图：

image

开始使用

采用的是地图 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 步。经纬度，详细地址，省市区都已经拿到了。那就差和后端的数据匹配上了（这个操作见仁见智，不一定每个人都有）

后端数据大概长这样：

image

我要做的就是拿到中文名称，匹配出对应的 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.child
        return 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

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

以上内容转载自Jioho_的文章《vue中使用腾讯地图选择地址》

来源：CSDN

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。