前言使用地图选点组件导致的一系列问题：1.选中地址的回调路径不兼容hash路由2.回调后腾讯地图返回完整地址，以及用户所在省市的具体名称为必填项。3、获取具体省市名称后，如何将对应的身份证相关证件与后台数据进行匹配。地图选择组件效果图：地图API的第二种方法是开始使用，跳转新页面通过回调路径将地址信息带回原页面。原页面代码如下：action}`)this.$router.go(-1)window.location.href=`https://apis.map.qq.com/tools/locpicker?search=1&type=0&backurl=${url}&key=This改成了你的腾讯地图key&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版权归作者所有。商业转载请联系作者授权，非商业转载请注明出处。
