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.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

著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。