vue使用腾讯位置服务选点组件问题总结 - 编程思维

前言

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

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

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

版权声明:本文版权归作者所有,遵循 CC 4.0 BY-SA 许可协议, 转载请注明原文链接
https://segmentfault.com/a/1190000023711388

包含20多个常用组件,地图应用组件库用这一个就够了 - 编程思维

今天 Gitee 给大家介绍的这个项目厉害了,是一款集合了二十多款组件的地图应用组件库,也是最新入选 GVP 的项目。如果有开发者想要在自己的项目中加入地图组件,那么这个组件库一定是一个优秀的选择。 项目名称:xdh-map 项目作者:铁匠铺 开源许可协议:MIT 项目地址:https://gitee.com/newg

高德地图实现(附案例) - 编程思维

需求:基于高德地图实现地图展示实现步骤:1.首先注册登录并创建一个应用 2.创建应用后添加key,获取key值。此案例为web端(JS) 3.引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您

地图匹配算法实践 - 编程思维

1 背景 如下图所示,1、2、3 这三个点是汽车的GPS定位结果,尽管汽车是在道路上,但定位结果与道路存在偏差。地图匹配(Map Matching)是指将行车轨迹的经纬度采样序列与数字地图路网匹配的过程,其本质上是平面线段序列的模式匹配问题( Alt等,2003)。 在实际应用中,GPS采样信号的质量会严重影响地图匹

vue使用腾讯地图选点组件问题总结 - 编程思维

前言使用地图选点组件引发的一系列问题:1、选择地址的回调路径不兼容哈希路由2、回调后腾讯地图返回了完整的地址,而用户需要省市区具体名称3、获取省市区具体名称后,如何和后端的数据对上对应的 ID相关文档地图选点组件效果图:开始使用采用的是地图 API 的第二种方式,跳转新的页面,通过回调路径把地址信息带回来原先页面代码如

腾讯地图点聚合应用之地图找房 - 编程思维

链家实现的效果分析地图找房功能使用点聚合来实现的。官网示例如下:https://lbs.qq.com/javascript...链家的地图找房主要分为三层。第一层为市区层,比如南山、罗湖等;第二层为片区,比如南头、科技园等;第三层则为小区。因为第一层,第二层的数据没有那么多,这两个接口都是把所有的数据一次返回给前端。但

腾讯位置服务点聚合开发-实现地图找房功能 - 编程思维

链家实现的效果分析地图找房功能使用点聚合来实现的。官网示例如下:https://lbs.qq.com/javascript...链家的地图找房主要分为三层。第一层为市区层,比如南山、罗湖等;第二层为片区,比如南头、科技园等;第三层则为小区。因为第一层,第二层的数据没有那么多,这两个接口都是把所有的数据一次返回给前端。但

腾讯位置服务地图选点组件使用示例 - 编程思维

本文主要使用到的功能为:1、选择地址发送(地图选点组件 )2、实时地址静态图3、地图调起 ,手机查看选址组件主要是选地点的信息,如下:在js或者数据库中保存这些信息,静态图片和地图API的调起就要用到这些信息,主要还是经纬度。可以用在聊天发送定位的功能中。Demo中把key替换成你的keykey申请地址:https:/