[vue-baidu-map] Click to get the current specific address

Click to get current address 

need

1. Click a point to get the address of the current location, and the information window will display the effect.

accomplish

Step 1: Initialize definition data

data() {
  return {
    point:null,
    BMap: null,
    map: null,

    address: '',
    infoWindowShow:false,
    longitude:'',
    latitude:'',
  };
},

Step 2: Map initialization and point location. 

//地图初始化
mapReady({ BMap, map }) {
  this.BMap=BMap
  this.map=map
  this.point = new BMap.Point(113.27, 23.13); // 选择一个经纬度作为中心点
  map.centerAndZoom(this.point, 12); //设置地图中心点和缩放级别
},
//点击获取经纬度
getLocation(e){
  this.longitude=e.point.lng
  this.latitude=e.point.lat
  
  console.log(e.point)
  const myGeo = new BMap.Geocoder() // 创建地址解析器的实例
  myGeo.getLocation(e.point, rs => {
    // console.log(rs.surroundingPois) // 附近的POI点(array) 
    // console.log(rs.business) // 商圈字段
    let adr = rs.addressComponents
    this.address = adr.province + adr.city + adr.district + adr.street + adr.streetNumber // 省市区街道门牌号
    this.infoWindowShow=true
    console.log(this.address)
  })
},
//信息窗口关闭
infoWindowClose(){
  this.latitude=''
  this.longitude=''
  this.infoWindowShow=false
},

Step 3: Component rendering

<baidu-map class="search-view"  @ready="mapReady" @click="getLocation">
  <!-- 弹框 -->
  <bm-info-window :position="{lng: longitude, lat: latitude}" :show="infoWindowShow" @clickclose="infoWindowClose">
      <p>{
   
   { address }}</p>
  </bm-info-window>
</baidu-map>

Step 4: Style 

.search-view {
  width: 300px;
  height: 300px;
  margin-top: 50px;
}