BMap 百度地图 拖动。大头针不动

BMap 百度地图 拖动。大头针不动

中心标注不随地图移动的效果

https://blog.csdn.net/cctcc/article/details/78506824

1.方法一 地图移动事件中 给大头针 赋值中心点坐标

this.map.addEventListener("touchmove", ()=>{
        console.log("---mapTouchmove---")
        this.pin.setPosition(this.map.getCenter())
      })

这种大头针会一跳 一跳 不行

2.方法二

//计算地图的尺寸以得出中心点应该所处的位移距离
var m_height=(map.getSize().height-24)/2;
var m_width=(map.getSize().width-19)/2;
// 定义一个控件类,即function
function ZoomControl(){
    // 默认停靠位置和偏移量
    this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
    this.defaultOffset = new BMap.Size(m_width,m_height);
}
// 通过JavaScript的prototype属性继承于BMap.Control
ZoomControl.prototype = new BMap.Control();
 
// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
ZoomControl.prototype.initialize = function(map){
    // 创建一个DOM元素
    var div = document.createElement("div");
    //div.innerHTML='aaaa';
    // 添加文字说明   
    // 设置样式 
    div.style.width = "19px";
    div.style.height = "24px";
    div.style.cursor = "pointer";
    div.style.background="url(images/markers_default.png) center no-repeat";
    // 绑定事件,点击一次放大两级
    div.onclick = function(e){
        map.setZoom(map.getZoom() + 2);
    }
    // 添加DOM元素到地图中
    map.getContainer().appendChild(div);
    //alert(map.getContainer().style.width);
    // 将DOM元素返回
    return div;
}
var myZoomCtrl = new ZoomControl();
// 添加到地图当中
map.addControl(myZoomCtrl);

上面的代码注释的比较详细了，关键在于前两行，我们通过map.getSize()方法获取地图的大小，进而可以计算出地图中心点的偏移距离是多少，这样无论地图如何移动，中间的标注点始终漂浮在地图中心。

image.png

这样可以
加个id 还能控制 他的 显示 与隐藏

var div = document.createElement('div');  
div.id = 'mask_div1';  
div.className = 'mask';  
div.appendChild(document.createTextNode("test"));  
div.style.position = "absolute";  
div.style.left =  '20px';  
div.style.top =  '20px';  
div.style.overflow = "hidden";  
div.style.zIndex = "9999";  
div.style.opacity = 0.3; 

页可以先定义好

 <div id="location" class="flag" >
   <img style="width: 55px;" :src="icon" />
 </div>

ZoomControl(){
      let map = this.map
      let m_height=(map.getSize().height-14)/2;
      let m_width=(map.getSize().width-4)/2;
      function ZoomControl(){
        this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
        this.defaultOffset = new BMap.Size(m_width,m_height);//
      }
    // 集成Control类
      ZoomControl.prototype = new BMap.Control();
      // 实现initialize方法
      ZoomControl.prototype.initialize = function(map){
          // 创建一个DOM元素
          let div = document.getElementById("location");
          // 添加DOM元素到地图中
          map.getContainer().appendChild(div);
          return div;
      }
      // 创建控件
      let myZoomControl = new ZoomControl();
      map.addControl(myZoomControl);
    },