【vue-baidu-map】自动填充搜索显示信息窗

自动填充搜索显示信息窗

 

需求

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>