js 引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=4d81136d607c68fb6c906599c0bd1de1&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder"></script>
为组件,直接使用。
<template>
<div>
<div style="display: flex;">
<el-select size="mini" @change="initAutocompleteCity" filterable v-model="cityName" placeholder="选择城市">
<el-option v-for="data in cityLists" :key="data.city_name" :label="data.city_name" :value="data.city_name"></el-option>
</el-select>
<el-input style="width: 440px;margin-left: 10px;" size="mini" id="tipinput" v-model="searchWeizhi" placeholder="输入关键字"></el-input>
</div>
<div id="container" style="margin-top: 10px;"></div>
<span slot="footer" class="dialog-footer" style="display: flex; justify-content: flex-end;margin-top: 20px;">
<el-button type="primary" @click="sureOpanre">确 定</el-button>
</span>
</div>
</template>
<script>
var geocoder,marker,lnglat,map,searchmap,Autocomplete;
export default{
data(){
return{
cityName:'',
searchWeizhi:'',
lishiLat:[]
}
},
props:{
cityLists:{
type:Array
}
},
mounted() {
this.intialMap();
},
created() {
},
updated() {
},
methods:{
sureOpanre(){
this.$emit('comfirmOparete',{
name:this.searchWeizhi,
lng:this.lishiLat[0],
lat:this.lishiLat[1]
})
},
intialMap(){
let that = this;
setTimeout(()=>{
map = new AMap.Map('container', {
resizeEnable: true, //是否监控地图容器尺寸变化
zoom: 11 //初始化地图层级
});
map.on('click',function(e){
console.log(e)
map.clearMap();
lnglat = e.lnglat;
that.lishiLat = [lnglat.lng, lnglat.lat];
marker = new AMap.Marker();
map.add(marker);
marker.setPosition(lnglat);
that.lngatByAdress(lnglat);
})
this.initAutocompleteCity();
},200)
},
lngatByAdress(lnglat){
let that = this;
geocoder = new AMap.Geocoder({
city: '全国', //城市设为北京,默认:“全国”
radius: 1000 //范围,默认:500
});
geocoder.getAddress(lnglat, function(status, result) {
console.log('result',lnglat);
if (status === 'complete'&&result.regeocode) {
var address = result.regeocode.formattedAddress;
that.searchWeizhi = address;
}else{
}
})
},
initAutocompleteCity(){
// $('.amap-sug-result').remove();
var autoOptions = {
input: "tipinput",
city: this.cityName
};
map.clearMap();
this.searchWeizhi = '';
var auto = new AMap.Autocomplete(autoOptions);
AMap.event.addListener(auto, "select", this.select);
},
select(e){
var lng = Number(e.poi.location.lng);
var lat = Number(e.poi.location.lat)
let _that = this;
map.clearMap();
map.setCenter([lng, lat])
this.lishiLat = [lng, lat];
var marker = new AMap.Marker({
position : [lng, lat]
});
map.add(marker);
_that.lngatByAdress(_that.lishiLat);
},
}
}
</script>
<style>
#container {
width: 100%;
height: 300px;
}
.amap-sug-result{
z-index: 999999999999999;
}
</style>