JS-百度地图API实时标注中心点

经理提的要求就是滑动地图或者点击地图的一个地方，中心点标注会跟着变化，下面也会更新周边地址

这里只说滑动部分

其实就是添加dragend事件，百度地图文档里面有

var v = this
this.map = new BMap.Map("allmap", {minZoom: 4, maxZoom: 20});    // 创建Map实例
this.map.centerAndZoom(new BMap.Point(114.372024, 30.544483), 16);  // 初始化地图,设置中心点坐标和地图缩放级别
//添加事件
this.map.addEventListener('dragend',function () {
  console.log("滑动");
  console.log(v.map.getCenter().lng)
  var geoc = new BMap.Geocoder();
  geoc.getLocation(new BMap.Point(v.map.getCenter().lng, v.map.getCenter().lat), (rs) => {
    console.log(rs);
    v.onGetAddress(rs)
  })
})

onGetAddress方法是用来获取一个地址的周边地址数组的，就不放上来了

//标注

this.map.clearOverlays();
if(address.surroundingPois.length == 0) {           //这个获取的周边地址数组长度为0，就获取到整个视图的中心点，标注在当前视图的中心点
  var points=new BMap.Point(this.map.getBounds().getCenter().lng,this.map.getBounds().getCenter().lat)
  var marker = new BMap.Marker(points);
}
else {                                              //这个是获取到的地址，标注在这里，pointLat和pointLng是之前命名错误
  var point =(this.pickerData[0])[0]
  var marker = new BMap.Marker(new BMap.Point(point.pointLat, point.pointLng));
}

  // 标注
  this.map.addOverlay(marker);                // 将标注添加到地图中
  for (var i = 0; i < this.$refs.wrap.children.length; i++) {
    this.$refs.wrap.children[i].children[0].className = "content"
  }
}

 

今天改了改代码，已完美实现需求惹！