Vue+高德地图开发地图选址及查看地址组件

上面是dom，使用element-uidialog进入弹框，编辑加载需要用到的地图插件，AMap.Geocoder和AMap.PlaceSearch，因为是时候一开始就是这样做的，单独使用我发现了一种AMap.Geocoder，很多在高德地图上能查到的地址都定位不到，于是查看了文档的FAQ，里面的描述是：“高德地图的搜索是一种复合搜索……在定位搜索的研发中，可以先进行地址分析，再进行关键词搜索，以获得更好的结果。》查看是直接根据外部输入的经纬度，初始化地图。当然我这里是保证AMap和AMapUI都已经加载，否则会报错。我用了一个比较笨的method，这是计时加载器一直执行加载的代码，然后一旦你在这里都有，停止计时器，这是一种愚蠢的方式。下面是编辑坐标时的逻辑.geoCoder){clearInterval(this.timer);this.isUseNearBy=false;this.placeSearch.search(this.handleCityName,(status,result)=>{if(status==='complete'){if(result.poiList.pois.length){if(result.poiList.pois.length%this.pageSize!==0){this.isUseNearBy=true;this.bottomLineShow=true;}else{this.isUseNearBy=false;this.bottomLineShow=false;}constgeos=result.poiList.pois[0].location;this.center=[geos.lng,geos.lat];this.getAreaInfo('location',(res)=>{this.lists=result.poiList.pois//将查询到的位置赋给this._initScroll();这个.getAddress(0);this.createdMap([this.ruleForm.long,this.ruleForm.lat]);这个.addMarker();})}else{if(result.cityList&&result.cityList.length>1){this.lists=[];这个.onCloseModal();this.$message.info(`当前搜索地址在${result.cityList.length}个城市有多个结果，搜索前请先说明`);}else{this.lists=[];这个.onCloseModal();this.$message.info('找不到地址，请替换关键字查询');}}}elseif(status==='no_data'){this.$message.warning(`您输入了地址“${this.cityName}”，没有找到相关信息`);this.getAreaInfo('address',(res)=>{this.lists=[{location:{lng:res.geocodes[0].location.lng,lat:res.geocodes[0].location.lat,},名称：res.geocodes[0].formattedAddress，地址：'',}]this.center=[res.geocodes[0].location.lng,res.geocodes[0].location.lat]this._initScroll();这个.getAddress(0);this.createdMap([this.ruleForm.long,this.ruleForm.lat]);这个.addMarker();this.isUseNearBy=true;this.bottomLineShow=true;});}else{this.fixedPosition();//精确定位或者IP地址定位}})}}，当然也是保证this.placeSearch和this.geoCoder（即AMap.Geocoder和AMap.PlaceSearch）被加载，上面提到的笨方法是使用AMap.PlaceSearch.search方法通过关键字查询传入地址。如果找到，则确定新地图中心点的经纬度，然后通过AMap.Geocoder.getAddress方法传入新地图中心点，点击经纬度，分析省、市、或的信息城市。也可能是关键字查询不明确（省、市、市不清楚）。比如你只写xx路，可能全国很多地方都有结果，弹框会关闭，提示清除查询后，可能根本找不到关键词。AMap.PlaceSearch.search返回no_data，则传入的关键字使用AMap.Geocoder.getLocation方法分析关键字所在的城市。总之，这里的逻辑是AMap.Geocoder和AMap.PlaceSearch一起使用。这里的this.getAreaInfo方法是解析地址所在省市的方法，并设置一个回调函数作为参数：//依赖高德的接口获取省市信息getAreaInfo(type,callback){if(type==='address'){//编辑时按地址名查询this.geoCoder.getLocation(this.handleCityName,(status,result)=>{if(status==='complete'&&result.geocodes.length){this.ruleForm.regeocode.adcode=result.geocodes[0].adcodethis.ruleForm.regeocode.province=result.geocodes[0].addressComponent.provincethis.ruleForm.regeocode.city=result.geocodes[0].addressComponent.city==''?result.geocodes[0].addressComponent.province:result.geocodes[0].addressComponent.citythis.ruleForm.regeocode.district=result.geocodes[0].addressComponent.district;callback(result);}elseif(status==='no_data'){this.lists=[];this.onCloseModal();this.$message.info('Failedtofind地址，请替换t他关键字查询');}否则{这个。固定位置（);//精确定位还是IP地址定位}});}elseif(type==='location'){//查询this.geoCoder.getAddress(this.center,(status,result)=>{if(status==='complete'&&result.regeocode&&result.regeocode.addressComponent){this.ruleForm.regeocode.adcode=result.regeocode.addressComponent.adcodethis.ruleForm.regeocode.province=结果.regeocode.addressComponent.provincethis.ruleForm.regeocode.city=result.regeocode.addressComponent.city==''?result.regeocode.addressComponent.province:result.regeocode.addressComponent.citythis.ruleForm.regeocode.district=result.regeocode.addressComponent.district;回调（结果）;}else{this.fixedPosition();//精确定位或IP地址定位}});}},上面获取地址的时候会设置为地址列表，设置在地图的左侧，供用户选择，使用better-scroll滚动，可以拉起加载进行分页，所以这里我就不展开了通过以上步骤，大多数情况下可以查询到准确的关键词，一些高德没有收录的企业信息也可以定位到街道、乡镇、省、市区。另外，当点击地图时，会触发AMap.PlaceSearch.searchNearBy方法查询鼠标点击的周边区域，作为补充：//查看更多，该方法也使用了searchMore(e){if(e){这用于上拉加载.isUseNearBy=true;this.placeSearch.opt.pageIndex=1;this.center=[e.lnglat.getLng(),e.lnglat.getLat()];}else{this.placeSearch.opt.pageIndex+=1;}this.geoCoder.getAddress(this.center,(status,result)=>{if(status==='complete'&&result.info==='OK'){letaddressComponent=result.regeocode.addressComponent;这.ruleForm.regeocode.adcode=addressComponent.adcodethis.ruleForm.regeocode.province=addressComponent.provincethis.ruleForm.regeocode.city=addressComponent.city==''?addressComponent.province:addressComponent.citythis.ruleForm.regeocode。district=addressComponent.district;letcityName=this.isUseNearBy?'':this.handleCityName;if(this.isUseNearBy){this.placeSearch.searchNearBy(cityName,this.center,1000,(status,result)=>{this.searchCallBack(status,result,e)});}else{this.placeSearch.search(cityName,(status,result,e)=>{this.searchCallBack(status,result)});}}else{this.emptyLocationData();}})},searchCallBack(status,result,event){if(status==='complete'&&result.poiList.pois.length){if(event){this.lists=result.poiList.pois;如果（this.lists.length%this.pageSize!==0）{this.bottomLineShow=true;}else{this.bottomLineShow=false;}this.getAddress(0);if(this.scroll){this.scroll.scrollTo(0,0);this.scroll.finishPullUp();}else{this._initScroll();}this.addMarker();}别的{this.lists=concat(this.lists,result.poiList.pois);如果（this.lists.length%this.pageSize!==0）{this.bottomLineShow=true;}else{this.bottomLineShow=false;}this.originalStatus();}}else{this.bottomLineShow=true;}}，主要就是上面的部分，还有里面用到的一些方法，先放几张图吧，第一次写文章，写的乱七八糟