思路: 用下可搜索拉框,监听输入值调用地图接口获取地址列表渲染到下拉选项中,对下拉选项绑定点击事件(需要加.nataive),获取到经纬度标记到地图上,点击地图点位时逆向解析经纬度获取到点击的地址弄成数组回显给下拉框选项。
<el-select size="small" ref="selectAddress" v-model="formData.address" filterable remote reserve-keyword placeholder="请输入地址" :remote-method="getAddress" :loading="mapLoading">
<el-option v-for="item in addressList" :key="item.id" :label="item.name" @click.native="getPoint(item.location)" :value="item.name"> </el-option>
</el-select>
<tableMap class="map" @getLngLat='getLngLat' @usePoinggetAddressList='usePoinggetAddressList' @getAddressList='getAddressList' :centerPoint='centerPoint' ref="tableMap"></tableMap>
mapLoading:false,
addressList:[], //下拉选项
// 获取地址
getAddress(val) {
this.mapLoading=true;
this.$refs.tableMap.onSubmit(val);
},
// 获取下拉框的选中地址的经纬度
getPoint(location){
if(location && location.lat && location.lng){
this.$refs.tableMap.getpoint([location.lng,location.lat]);
this.formData.longitude =location.lng;
this.formData.latitude =location.lat;
this.formData = JSON.parse(JSON.stringify(this.formData));
}
},
getLngLat(arr) {
// this.formData.longitude = arr[0];
// this.formData.latitude = arr[1];
// this.formData = JSON.parse(JSON.stringify(this.formData));
},
// 获取地址下拉框数据
getAddressList(list){
// this.$nextTick(_ => { this.$refs.selectAddress.toggleMenu(); })
this.addressList=list;
this.mapLoading=false;
},
// 点击地图根据经纬度获取地址打开下拉弹框
usePoinggetAddressList(list){
this.addressList=list;
this.$nextTick(_ => { this.$refs.selectAddress.toggleMenu(); })
},
下面是地图组件的代码
<template>
<div id="container" style="width: 100%;height: 400rem"></div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
props: ['centerPoint'],
data() {
return {
map: null,
marker: null,
name: null,
addressInfo: {},
center: ['90.2882614', '43.8482728'], //默认一个经纬度
}
},
created() {
this.init();
},
watch: {
centerPoint(newval, oldval) {
if (newval && newval[0] && newval[1]) {
this.center = newval;
this.init();
}
}
},
methods: {
onSubmit(val) {
let that = this;
let keywords = val;
AMap.plugin('AMap.PlaceSearch', function () {
var autoOptions = {
city: '全国'
}
var placeSearch = new AMap.PlaceSearch(autoOptions);
placeSearch.search(keywords, function (status, result) {
if (result.info == 'OK') {
if (result.poiList.pois.length && result.poiList.pois.length > 0) {
that.$emit('getAddressList', result.poiList.pois)
} else {
that.$notify({
title: '未查询到',
message: '暂未查询到搜索数据',
type: 'success',
duration: 900,
position: 'top-left',
});
}
} else {
}
// 搜索成功时,result即是对应的匹配数据
// console.log(result,999)
})
})
},
getpoint(arr) {
this.center = arr;
this.map.setZoomAndCenter(11, this.center)
this.addMarker()
},
init() {
AMapLoader.load({
key: "", //自己申请的key
version: "2.0",
}).then((AMap) => {
this.map = new AMap.Map("container", {
center: this.center,
zoom: 11, //地图放大数
mapStyle: 'amap://styles/23053052765164595eb5c6cdff6cc98b' //地图样式
});
this.map.on('click', this.showInfoClick);
if (this.centerPoint && this.centerPoint[0] && this.centerPoint[1]) {
this.addMarker();
}
}).catch((e) => {
console.log(e);
});
},
// 实例化点标记
addMarker() {
if (this.marker) {
this.marker.setMap(null);
this.marker = null;
}
this.marker = new AMap.Marker({
icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
position: this.center,
offset: new AMap.Pixel(-23, -55)
});
this.marker.setMap(this.map);
},
showInfoClick(e) {
let lnglat = [e.lnglat.lng, e.lnglat.lat]
let that = this;
AMap.plugin('AMap.Geocoder', function () {
var geocoder = new AMap.Geocoder({
// city 指定进行编码查询的城市,支持传入城市名、adcode 和 citycode
city: '全国'
})
geocoder.getAddress(lnglat, function (status, result) {
if (status === 'complete' && result.info === 'OK') {
// result为对应的地理位置详细信息
let addressList = [
{
name: result.regeocode.formattedAddress,
id:that.$makeRandom(1,1000),
location: {
lat: e.lnglat.lat,
lng: e.lnglat.lng
}
}];
that.$emit('usePoinggetAddressList', addressList)
}
})
})
},
}
}
</script>
<style scoped lang='less'>
.box{
position: relative;
.search{
position: absolute; top: 0; z-index: 99;
}
}
</style>