公司pc端有一个地图选址及查看地图功能，这个是几个月前就开发完了，最近欠缺了一下，先上最终成果吧。
抉择省市区填写具体地址进入点击确认坐标关上地图弹框
依据传入的地址查问到了地址能够查看更多地址，能够点击地图查看周边，点击确认，获取坐标。
这是查看地址
好了，上实现代码。
<template> <el-dialog title="" :close-on-click-modal="false" :destroy-on-close="true" :visible.sync="visibleVal" :modal="modal" width="800px" class="x-ui-modal map__dialog"> <div id="container"></div> <div class="poi__list" ref="scrollWrap" v-if="lists.length"> <div class="ul"> <div class="address-item" :class="nearbyIndex === choiceIndex ? 'active' : ''" @click.stop="choiceAddress(nearbyIndex)" v-for="(nearby, nearbyIndex) in lists" :key="nearbyIndex"> <div class="icon"></div> <div class="text"> <div class="name" :title="nearby.name">{{nearby.name | ellipsis}}</div> <div class="address" :title="nearby.address">{{nearby.address | ellipsis}}</div> </div> </div> <div v-show="bottomLoadingShow"><Loading /></div> <div v-show="bottomLineShow"><BottomLine :text="'已无更多数据，点击地图\n任意一处能够查看周边'"/></div> <div v-show="moreShow" @click="loadingMore"><BottomLine :text="'上拉或点我查看更多'" style="cursor: pointer;" /></div> </div> </div> <div v-if="isEdit" class="city__name" :title="`您查问的${customerName ? '客户及地址' : '地址'}：${searchKwords}`"> <el-input v-model="searchKwords" disabled /> </div> <template v-if="isEdit"> <div class="main__footer"> <el-button @click="onCloseModal()" class="x-ui-btn add__cancel" size="medium">勾销</el-button> <el-button @click="onSubmit()" class="x-ui-btn add__submit" type="primary" size="medium">确认</el-button> </div> </template> <template v-else> <div class="main__footer"> <el-button @click="onCloseModal()" class="x-ui-btn add__cancel" size="medium">敞开</el-button> </div> </template> </el-dialog></template>以上是dom，用的是element-ui的dialog。
进入弹框后，编辑加载须要用到的地图插件，AMap.Geocoder和AMap.PlaceSearch，因为一开始做这个是时候，独自应用了一种AMap.Geocoder，很多高德地图上能查到的地址都定位不到，于是查看了文档的常见问题，外面的形容就是：“高德地图的搜寻是复合型搜寻......地位搜寻的研发中，能够先进行地址解析，再进行关键词搜寻，以失去更优的后果。” 查看则间接依据内部传入的经纬度定位，初始化地图。当然我这里是在保障AMap和AMapUI都曾经加载到的状况下再做的，否则就会报错，我用了比拟笨的方法，就是定时器一直执行加载的代码，而后在这里一旦两个都有了，就进行定时器，比拟笨的方法了。
上面就是编辑坐标时的逻辑了
interval() { this.timer = setInterval(function() { this.awaitPlaceSearch(); }.bind(this), 50) }, awaitPlaceSearch() { if(this.placeSearch && this.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; } const geos = result.poiList.pois[0].location; this.center = [geos.lng, geos.lat]; this.getAreaInfo('location', (res) => { this.lists = result.poiList.pois//将查问到的地点赋值 this._initScroll(); this.getAddress(0); this.createdMap([this.ruleForm.long, this.ruleForm.lat]); this.addMarker(); }) } else { if(result.cityList && result.cityList.length > 1) { this.lists = []; this.onCloseModal(); this.$message.info(`以后搜寻地址在${result.cityList.length}个城市有若干后果，请明确后再搜寻`); } else { this.lists = []; this.onCloseModal(); this.$message.info('未能查问到该地址，请更换关键字查问'); } } } else if(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, }, name: res.geocodes[0].formattedAddress, address: '', } ] this.center = [res.geocodes[0].location.lng, res.geocodes[0].location.lat] this._initScroll(); this.getAddress(0); this.createdMap([this.ruleForm.long, this.ruleForm.lat]); this.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].adcode this.ruleForm.regeocode.province = result.geocodes[0].addressComponent.province this.ruleForm.regeocode.city = result.geocodes[0].addressComponent.city == '' ? result.geocodes[0].addressComponent.province : result.geocodes[0].addressComponent.city this.ruleForm.regeocode.district = result.geocodes[0].addressComponent.district; callback(result); } else if(status === 'no_data') { this.lists = []; this.onCloseModal(); this.$message.info('未能查问到该地址，请更换关键字查问'); } else { this.fixedPosition();//精准定位或IP地址定位 } }); } else if(type === 'location') { // 在查看的状况下通过经纬度查问 this.geoCoder.getAddress(this.center, (status, result) => { if (status === 'complete' && result.regeocode && result.regeocode.addressComponent) { this.ruleForm.regeocode.adcode = result.regeocode.addressComponent.adcode this.ruleForm.regeocode.province = result.regeocode.addressComponent.province this.ruleForm.regeocode.city = result.regeocode.addressComponent.city == '' ? result.regeocode.addressComponent.province : result.regeocode.addressComponent.city this.ruleForm.regeocode.district = result.regeocode.addressComponent.district; callback(result); } else { this.fixedPosition();//精准定位或IP地址定位 } }); } },以上在获取到地址时都会设置为一个地址列表，设置在地图左侧，供用户抉择，滚动应用better-scroll，能够上拉加载进行分页，这里不开展说了。
通过以上步骤，大部分状况下都能查问到准确的关键字，一部分高德没有收录的企业信息，也能定位到所在街道乡镇省市区。此外还在点击地图的时候触发了AMap.PlaceSearch.searchNearBy办法查问鼠标点击处的周边，作为补充：
// 查看更多，此办法也给上拉加载应用searchMore(e) { if(e) { this.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') { let addressComponent = result.regeocode.addressComponent; this.ruleForm.regeocode.adcode = addressComponent.adcode this.ruleForm.regeocode.province = addressComponent.province this.ruleForm.regeocode.city = addressComponent.city == '' ? addressComponent.province : addressComponent.city this.ruleForm.regeocode.district = addressComponent.district; let cityName = 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; if(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(); } else { this.lists = concat(this.lists, result.poiList.pois); if(this.lists.length % this.pageSize !== 0) { this.bottomLineShow = true; } else { this.bottomLineShow = false; } this.originalStatus(); } } else { this.bottomLineShow = true; } },次要的局部就是下面这些，还有一些外面用到的办法，我截几张图吧，第一次写文章，写的比拟乱。