【vue-baidu-map】点击获取当前具体地址

点击获取当前地址 

需求

1.点击一个点获取当前位置的地址，信息窗展示效果。

实现

第一步：初始化定义数据

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

    address: '',
    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); //设置地图中心点和缩放级别
},
//点击获取经纬度
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
},

第三步 ：组件渲染

<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>

第四步：样式 

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