效果如下：
好的，看看具体的实现代码：高德地图导入vue我就不在这里写了，参考之前的博客：点击打开链接
区域选择部分：
<FormItem label="选择区域" style="width: 45%;" prop="areaTemp">
<!-- <fa-cascader ref="cascaderAddress" v-model="addFormItem.companyArea" class="item-width" @input="areaChange" ></fa-cascader> -->
<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"/>
<!-- <Input v-model="mapSearchAddress" placeholder="请输入内容" style="width: 60%;"/> -->
<!-- <Input v-model="mapSearchAddress" placeholder="请输入内容" @on-change="autoSelect" style="width: 60%;"/> -->
</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;
}
}