vue-amap搜索点选择，拖点选择，地理编码，反向地理编码，IP城市定位，信息表格
需求&图例标题功能分为2部分：【原需求】填写地址：省市（下拉）+详情（输入），【新需求】原需求不变，但增加快捷方式选择地址，一个。选择后添加地图搜索和回填地址b.常用地址/历史地址列表，选择后回填地址；图解说明：所有图解案例均为代码功能展示，无关美观。图1：图2：地理编码：将地址转换为经纬度；逆向地理编码：将经纬度转换为地址；【要求】：地图打开中心点默认为ip所在城市；根据历史GPS数据显示车辆的历史轨迹信息，点击轨迹点显示信息窗口，右侧显示屏显示当前车辆经纬度对应的详细地址；图三：（中心点默认ip所在城市）图四：（根据GPS数据轨迹显示车辆历史，根据后台返回的数据显示）图五：（前端仿真数据，显示轨迹，点击显示信息窗口，右侧显示反向地理编码信息）图6：（根据地址信息转换为经纬度，标注在地图上）main.jsimportVueAMapfrom'vue-amap';//尝试将名称与AMap区分开来Vue.use(VueAMap);VueAMap.initAMapApiLoader({key:'你的key',plugin:["AMap.Autocomplete","AMap.PlaceSearch","AMap.Scale","AMap.ToolBar","AMap.OverView",'AMap.MapType','AMap.PolyEditor','AMap.CircleEditor',"AMap.Geolocation","AMap.Geocoder","AMap.CitySearch",],v:'1.4.15',uiVersion:"1.1"});window._AMapSecurityConfig={securityJsCode:'你的安全js代码',}结构如图1和图2基础，其他功能只是基于逻辑，用以描述为准。省略所有样式代码。省市下拉是通过访问后台接口实现的。这里需要将地图选择点中获取的省市名称传递给后端，获取下拉所需的代码。常用/历史选择点列表是通过后台接口获取的，省略接口逻辑，仅数据结构map-dialog.vuetemplate{{scope.row.province+scope.row.city+scope.row.district}}
选择
scriptimport{GET_CITYS_CODES}from'@/api/xx/index.js';//使用从地图中获取的省市名称来更改下拉的省市名称codeexportdefault{props:{params:{type:Object,default:{},},},data(){让自己=这个;返回{activeName:"first",amap:{zoom:9,center:[0,0],plugin:['ToolBar'],marker:[0,0],events:{click(e){self.markerClick(e)},//选择点点击事件dragend(e){self.dragEnd(e)},//选择点拖动事件}},searchOption:{city:'',citylimit:true},//dataListis本来是从后台接口获取的，这里不重要，只用于数据结构展示250AstonRoad,RenheStreet",codes:['510000','510100','510107']}],obj:{},addr:""}},methods:{//可以放在特殊的utils中文件，这里为了展示方便，放在methods中//获取当前ip所在的城市getCurrentCity(){returnnewPromise((resolve,reject)=>{letcity;AMap.plugin('AMap.CitySearch',function(){city=newAMap.CitySearch()})city.getLocalCity(函数（状态,result){if(status==='complete'&&result.info==='OK'){resolve(result.bounds.oc)}else{reject('未检测到地址')}});})},//可以放在专门的utils文件中，这里为了展示方便，放在methods中//逆向地理编码：将经纬度转换为地址；getPositionByLonLats(lnglat){returnnewPromise((resolve,reject)=>{letgeocoder;AMap.plugin('AMap.Geocoder',function(){geocoder=newAMap.Geocoder()})geocoder.getAddress(lnglat,function(status,result){if(status==='complete'&&result.info==='OK'){resolve(result.regeocode)}else{reject('未检测到地址')}});})},//可以放在一个特殊的utils文件中，this为了展示方便，放在methods中//Geocoding:Convertaddresstolatitusandlongitude(类似逆地理编码，这里不调用演示)getPositionByAddr(addr){returnnewPromise((resolve,reject)=>{letgeocoder;AMap.plugin('AMap.Geocoder',function(){geocoder=newAMap.Geocoder()})geocoder.getLocation(addr,function(status,result){if(status==='complete'&&结果.geocodes.length){resolve(result.geocodes[0].location)}else{reject('未检测到地址')}});})},//弹窗打开事件：中心点默认设置为ip地址setData(){this.getCurrentCity().then((res)=>{this.amap.center=[];this.amap.center.push(res.lng,res.lat);})},//点击搜索列表结果//注意：返回的结果是一个数组，默认选择第一个作为点坐标asynconSearchResult(pois){letself=this;awaitthis.getPositionByLonLats([pois[0].lng,pois[0].lat].then((res)=>{self.obj={...res.addressComponent};self.addr=res.formatted地址；}).catch((err)=>{errorMsg(err);return})self.amap.center=[];self.amap.center.push(pois[0].lng,pois[0].lat);self.amap.marker=[];self.amap.marker.push(pois[0].lng,pois[0].lat);self.amap.zoom=18;},//点坐标拖拽结束dragEnd(e){letself=this;//self.getPositionByLonLats([e.lnglat.lng,e.lnglat.lat]).then((res)=>{self.obj={...res.addressComponent};self.addr=res.formattedAddress;}).catch((err)=>{errorMsg(err);return})},//点击点坐标，是否确认选择markerClick(){letself=this;self.$confirm(`是否确认选择【${this.addr}】？`,"Confirmtheselection",{closeOnClickModal:false,cancelButtonClass:"cancel-btn",confirmButtonClass:"delete-btn",}).然后(()=>{设a=self.obj.province；设b=self.obj.city；设c=self.obj。区;//将点坐标传给后台，获取省市的下拉编码//注意：直辖市，高德不会返回城市名，后台要求，直辖市，省市同名GET_CITYS_CODES([a,b?b:a,c]).then((res)=>{if(res.code===10000){letinfo={地址：self.obj.township+self.obj.street+self.obj.streetNumber,codes:res.result}//将确认信息传递给父组件self.cancel(info);}});}).catch(()=>{});},//常用/历史列表选择按钮selectData(data){letinfo={address:data.address,codes:data.codes}//将选择信息传递给父组件this.cancel(info);},template//其他函数的结构同之前template类似，只保留el-amap
{{info.waybillNo}}
{{info.plate}}
{{info.phone}}
{{info.address}}
scriptdata(){return{//其他类似信息：{},//信息表infoList:[]//信息窗集合}},methods:{//点击坐标点弹出信息窗markerClick(e){letself=this;//只有第一次点击才会给所有信息窗口赋值（为了演示放在这里方便，赋值操作根据实际需要正常运行）if(self.infoList.length!==self.pathData.length){for(leti=0;i
