乐趣区

关于腾讯地图:vue使用腾讯位置服务选点组件问题总结

jiezi

前言

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

1、抉择地址的回调门路不兼容哈希路由

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

3、获取省市区具体名称后，如何和后端的数据对上对应的 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

著作权归作者所有。商业转载请分割作者取得受权，非商业转载请注明出处。

退出移动版