自动填充搜索显示信息窗
需求
1. 点击地图任一点展示信息窗
2. 自动填充搜索调用逆地址解析,匹配到的点弹出信息窗。
实现
第一步:初始化数据
data() {
return {
point:null,
BMap: null,
map: null,
keyword: '',
infoWindowShow:false,
longitude:'',
latitude:'',
};
},
第二步:地图初始化、搜索、获取经纬度、信息窗口
//地图初始化
mapReady({ BMap, map }) {
this.BMap=BMap
this.map=map
this.point = new BMap.Point(113.27, 23.13); // 选择一个经纬度作为中心点
map.centerAndZoom(this.point, 12); //设置地图中心点和缩放级别
},
//逆地址解析
search() {
let myGeo = new this.BMap.Geocoder()
myGeo.getPoint(this.keyword,(point)=>{
if(point){
this.map.centerAndZoom(point,15)
this.latitude=point.lat
this.longitude=point.lng
this.infoWindowShow=true
}
})
},
//点击获取经纬度
getLocation(e){
this.longitude=e.point.lng
this.latitude=e.point.lat
this.infoWindowShow=true
},
//信息窗口关闭
infoWindowClose(){
this.latitude=''
this.longitude=''
this.infoWindowShow=false
},
第三步:设置样式
.search-view {
width: 300px;
height: 300px;
margin-top: 50px;
}
.search-box {
display: flex;
align-items: center;
}
.complete {
width: 210px;
margin-right:15px
}
第四步:搜索框和弹窗
<baidu-map class="search-view" @ready="mapReady" @click="getLocation">
<!-- 搜索框 -->
<bm-control :offset="{width: '10px', height: '10px'}">
<bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 999999}">
<el-input class="complete" v-model="keyword"></el-input>
</bm-auto-complete>
<el-button type="primary" @click="search">搜索</el-button>
</bm-control>
<!-- 弹框 -->
<bm-info-window :position="{lng: longitude, lat: latitude}" :show="infoWindowShow" @clickclose="infoWindowClose">
<p>纬度:{{this.latitude}}</p>
<p>经度:{{this.longitude}}</p>
</bm-info-window>
</baidu-map>