前言使用地图选点组件引起的一系列问题：1.选地址的回调路径不兼容hash路由2.回调后，腾讯Map返回的是完整的地址，而用户需要的是具体的省市名称3.获取到具体的省市名称后，如何将对应的ID相关文档与后端数据进行匹配转向一个新的页面并通过回调路径带回地址信息。原页面代码如下：action}`)this.$router.go(-1)window.location.href=`https://apis.map.qq.com/tools/locpicker?search=1&type=0&backurl=${url}&key=ChangeheretoyourTencentmapkey&referer=这里是对腾讯地图应用名称的`url'的处理：为什么要这么麻烦的拼接？因为如果我每次直接取window.location.href那么如果用户多次选择地址，在使用escape转码的时候，路径的中文会被转换，但是我们不需要把给我们带来的参数每次都通过腾讯地图进入回调地址，所以我们为什么要自己拼接路径呢？vue中使用了原始的hash路由方式。也就是说，#将放在路径上。此时无法识别回调地址，所以需要使用escape做url处理，找到就跳转到。第一步是成功的。解决了第一个问题：选择地址的回调路径不兼容hash路由问题2.需要省、市、市名称。这是地图上的一个随机点。路径返回大概意思就是这些参数包括name=印象之家酒店公寓%28广元中路店%29&latng=23.15809,113.27209&addr=No.广东省广州市白云区广园中路216号&city=广州市&module=locationPicker大概是这样的:{name:"详细地址名称",latng:"所选地址的经纬度",addr:"省,市+placename",city:"Cityname",module:"Identification"}然后我需要处理的是经纬度，以及省市名称varurlData=this.$route.query//获取路由上的参数varlatng=urlData.latng.split(",")//获取经纬度varreg=/.+?(省|市|自治区|自治州|县|区)/g//省市规律console.log(latng)//[23.15809,113.27209]这个数组就是对应的经纬度console.log(urlData.addr.match(reg))//['广东省','广州市','白云区']和后台数据对接就经历了以上2个步骤。经纬度、详细地址、省市都拿到了。那还不足以匹配后台数据（这个操作不同人有不同的看法，不是每个人都有）。后台数据是这样的：我要做的就是获取中文名称，匹配对应的IDmethods:{/***递归方法，获取城市ID等*@param{Array}list中的地址列表数据库（每次循环都会匹配自己的child）*@param{Array}param需要查找的省市数组*@param{Number}level当前遍历的深度*@param{Array}area_idsID数组当前遍历过的省市*@return对应的ID数组*/locationGhosts(list,param,level=0,areaIds=[]){letchild=[]list.some(item=>{if(param[level].indexOf(item.area_name)!==-1){areaIds[level]=item.area_id//存储ID，已找到child=item.childreturntrue}})//判断不是改变三元运算符，详见尾递归的描述if(level===2){returnareaIds}else{returnthis.locationGhosts(child,param,++level,areaIds)}}}//递归调用到得到对应省IDletareaIds=this.locationGhosts(this.area_list,urlData.addr.match(reg),0)areaIds[0]//省IDareaIds[1]//城市IDareaIds[2]//区域ID至此，一个选择地址功能完美完成！以上内容转载自Jioho_的文章《vue中使用腾讯地图选择地址》来源：CSDN版权归作者所有。商业转载请联系作者授权，非商业转载请注明出处。
