vue iview 选择省市区填写地址实现地图定位 - 好文

效果如下：

好的，看看具体的实现代码：高德地图导入vue我就不在这里写了，参考之前的博客：点击打开链接
<https://blog.csdn.net/seanxwq/article/details/79240937>

区域选择部分：
<FormItem label="选择区域" style="width: 45%;" prop="areaTemp">  <Cascader :data="provinceData"
v-model="addFormItem.areaTemp" @on-change="handleChange"
placeholder="省/市/区"></Cascader> </FormItem> <FormItem label="地址" style="width:
45%;" prop="companyAddress"> <Input v-model="addFormItem.companyAddress"
placeholder="输入地址" style="width: 71%;" :disabled = "addFormItem.companyArea ?
false : true" @on-blur="findAddress"/> <Button type="primary"
@click="toShowMapModel" :disabled = "addFormItem.companyArea ? false :
true">地图定位</Button> </FormItem>
地图显示部分：
<Modal v-model="showMapModel" title="地图" @on-ok="comfirmUpdateMap"
@on-cancel="cancelUpdateMap" class-name="show-model" :loading="loading" >
<div><span class="fb">原地址：</span><span
style="color:red">{{scAddressComponent.city+scAddressComponent.district+mapAddress}}</span></div>
<div v-if="updateMapAddress"><span>修正地址：</span><span
style="color:green">{{updateAddressComponent.city+updateAddressComponent.district+updateMapAddress}}</span></div>
<div id="amap-page-container" style="height:400px"> <Form ref="searchForm"
:model="formItem" class="search-box" inline> <FormItem style="width:100%">
<input type="text" id="keyword" :value="keyword" name="keyword"
placeholder="请输入关键字" onfocus='this.value=""' class="mapSearchInput"/> 
 </FormItem> </Form> </div>
</Modal>
关键部分代码：
//地图相关 //弹窗初始化地图 initMap() { let vm = this; vm.mapSearchAddress = ""; let
mapOption = { resizeEnable: true, zoom: 13, city: this.mapCity };
this.$nextTick(() => { vm.amap = new AMap.Map("amap-page-container",
mapOption); vm.amap.setCenter([vm.lng, vm.lat]); //
AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () { //
vm.amap.addControl(new AMap.ToolBar()) // vm.amap.addControl(new AMap.Scale())
// }) let size = new AMap.Size(54, 54), infoContent = []; let imageSize = new
AMap.Size(54, 54); let locationIcon = new AMap.Icon({ size: size, image:
markImgUrl, imageSize: imageSize }); vm.marker = new AMap.Marker({ map:
vm.amap, icon: locationIcon, //地图标注 zIndex: 101, animation:
"AMAP_ANIMATION_DROP", //点标掉落效果 position: new AMap.LngLat(vm.lng, vm.lat),
offset: new AMap.Pixel(-27, -51) //图片偏移 }); mapFunction.reGeoCoder(vm.marker,
function(data) { vm.scAddressComponent = data.regeocode.addressComponent;
mapFunction.generateInfoContent( vm.amap, vm.marker, vm.scAddressComponent,
vm.mapAddress ); vm.markerLng = vm.marker.getPosition().lng; vm.markerLat =
vm.marker.getPosition().lat; }); AMap.event.addListener(vm.amap, "dragging",
function() { mapFunction.clearInfoWindow(vm.amap); let LngLatXY =
vm.amap.getCenter(); vm.marker.setPosition(LngLatXY); });
AMap.event.addListener(vm.amap, "dragend", function() { let LngLatXY =
vm.amap.getCenter(); vm.marker.setPosition(LngLatXY); vm.markerLng =
LngLatXY.lng; vm.markerLat = LngLatXY.lat; mapFunction.reGeoCoder(vm.marker,
function(data) { vm.updateAddressComponent = data.regeocode.addressComponent;
if (data.regeocode.pois.length) { vm.updateMapAddress =
vm.updateAddressComponent.township + vm.updateAddressComponent.street +
data.regeocode.pois[0].name; } else { vm.updateMapAddress =
data.regeocode.formattedAddress; } mapFunction.generateInfoContent( vm.amap,
vm.marker, vm.updateAddressComponent, vm.updateMapAddress ); }); }); //缩放地图
AMap.event.addListener(vm.amap, "zoomchange", function() { let LngLatXY =
vm.marker.getPosition(); vm.amap.setCenter(LngLatXY); }); //配置地图自动搜索
AMap.plugin(["AMap.Autocomplete"], function() { let autoOptions = { // city:
"福州", //城市，默认全国 input: "keyword" //使用联想输入的input的id }; let autocomplete = new
AMap.Autocomplete(autoOptions); AMap.event.addListener(autocomplete, "select",
function(e) { //TODO 针对选中的poi实现自己的功能、 vm.autoSelect(e.poi); }); }); }); },
autoSelect(item) { let vm = this; mapFunction.clearInfoWindow(vm.amap); if
(item.location) { vm.marker.setPosition(item.location);
vm.amap.setCenter(item.location); vm.markerLng = item.location.lng;
vm.markerLat = item.location.lat; mapFunction.reGeoCoder(vm.marker,
function(data) { vm.updateAddressComponent = data.regeocode.addressComponent;
if (data.regeocode.pois.length) { vm.updateMapAddress =
vm.updateAddressComponent.township + vm.updateAddressComponent.street +
data.regeocode.pois[0].name; } else { vm.updateMapAddress =
data.regeocode.formattedAddress; } mapFunction.generateInfoContent(vm.amap,
vm.marker, vm.updateAddressComponent, vm.updateMapAddress); }); } },
findAddress() { let vm = this; if (this.addFormItem.companyAddress ||
this.addFormItem.companyArea) { mapFunction.getLocaltion(
this.addFormItem.companyArea + this.addFormItem.companyAddress, function(data)
{ let firstResultAddress = data.poiList.pois[0]; vm.mapAddress =
firstResultAddress.name; vm.lng = firstResultAddress.location.lng; vm.lat =
firstResultAddress.location.lat; vm.amap.setCenter([vm.lng, vm.lat]);
vm.marker.setPosition([vm.lng, vm.lat]); mapFunction.reGeoCoder(vm.marker,
function(data) { vm.scAddressComponent = data.regeocode.addressComponent;
mapFunction.generateInfoContent(vm.amap, vm.marker, vm.scAddressComponent,
vm.mapAddress); vm.markerLng = vm.marker.getPosition().lng; vm.markerLat =
vm.marker.getPosition().lat; vm.addFormItem.companyLng = vm.markerLng;
vm.addFormItem.companyLat = vm.markerLat; // vm.addFormItem.companyAreaCode =
vm.scAddressComponent.adcode }); } ); } }, cancelUpdateMap() {
this.showMapModel = false; this.keyword = ""; }, comfirmUpdateMap() { if
(this.updateAddressComponent.district) { let vm = this, targetArea =
vm.updateAddressComponent.district; targetArea = targetArea.replace(/区|县|市/g,
""); if (this.addFormItem.companyArea.indexOf(targetArea) == -1) {
vm.$Modal.warning({ title: "提示", content: "该区域已超出派送范围，请重新选择！" }); setTimeout(()
=> { vm.loading = false; vm.$nextTick(() => { vm.loading = true; }); }, 1000);
return; } vm.showMapModel = false; vm.addFormItem.companyAddress =
vm.updateAddressComponent ? vm.updateMapAddress : vm.mapAddress; vm.lng =
vm.markerLng; vm.lat = vm.markerLat; vm.addFormItem.companyLng = vm.markerLng;
vm.addFormItem.companyLat = vm.markerLat; // vm.addFormItem.companyAreaCode =
vm.updateAddressComponent.adcode // vm.addFormItem.city = [] //
vm.addFormItem.city[0] = vm.updateAddressComponent ? vm.scAddressComponent.city
: vm.updateAddressComponent.city // vm.addFormItem.city[1] =
vm.updateAddressComponent ? vm.scAddressComponent.district :
vm.updateAddressComponent.district vm.mapAddress =
vm.addFormItem.companyAddress; }else{ this.addFormItem.companyAddress =
this.mapAddress; this.showMapModel = false; } }哎，东西是好东西，懒得不行，以后再优化下代码吧~

热门工具换一换