vue中实现百度地图拖拽地图定位功能

Posted 2020-10-16 于啊

   

效果如果所示，拖动地图。中间图标不动，并且自动获取地图当前中心点的经纬度。然后就可以用经纬度做其他的操作了。。。首先查看了百度地图的api。能实现这个功能最贴近的就是marker。marker可以拖拽，但是地图却动不了，我还用了另外一种是自己自定义一个marker。并且让marker相对地图位置绝对定位,地图拖拽，marker不动，拖拽结束后使用marker.getposition来获取当前位置，但是有个问题。自定义的marker在地图拖动的时候就看不见了。。应该是层级问题。让地图给挡住了。。太丑了。没办法。最后我选择第三种方案：

    使用一个control来模拟，我们知道control类可以固定在地图上不动。而且一直在地图最上层，这就很棒了。我的思路是用一个自定义的control来模拟中间的固定图标，然后通过地图的获取位置方法每次结束拖动后来获取位置。

  自定义control代码如下：

     

 

 

//这部分是我提取的一个control的公用函数

function BaseControl(offset) {
/* // 设置默认停靠位置和偏移量
this.defaultAnchor = {left:pos.left,top:pos.top};*/
this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
this.defaultOffset = new BMap.Size(offset.left, offset.top);
}
// 通过javascript的prototype属性继承于BMap.Control
BaseControl.prototype = new BMap.Control();
//创建一个基础的控件样式
function baseBtnContent() {
var div = document.createElement("div");
// 添加文字说明
var size = "2.215rem";
div.style.width = size;
div.style.height = size;
div.style.background = "no-repeat center/cover";
return div;
}

//这个是中间的固定control，我让他的背景图变成第一张图片的定位图标的样子。
function centerFixedControl(map,pos){
    BaseControl.call(this,pos);
    this.map=map;
  } 
  centerFixedControl.prototype = new BMap.Control();

  centerFixedControl.prototype.initialize = function() {
    var div = baseBtnContent();
    div.style.width="19px";
    div.style.height="27px";
    div.style.backgroundImage = "url(../static/images/wechatgroup/dw.png)";
    var _this=this;
    // 添加DOM元素到地图中   
    this.map.getContainer().appendChild(div);
    // 将DOM元素返回  
    return div;
  }

     function cfc(map,pos){
      var control=new centerFixedControl(map,pos);
     map.addControl(control);
     return this;
    }

　　然后就是把当前的控件加载到地图中

control().cfc(map,{left:172,top:117});/control.是import导入进来的整个createMapControl方法/

　　接下来就是在地图的拖拽事件里面获取当前的位置

this.map.addEventListener("dragend",(e)=>{
      var pos=this.map.getCenter();
      this.searchAround(pos);
 },false);

　使用map.getCenter可以和marker.getposition同样的效果，即得到一个经纬度，getCenter获取的是地图的中心点的经纬度，

然后就可以做很多，比如搜索附近

//搜索附近方法
   searchAround(point){
   	//搜索到附近的标志建筑之后进行排序，然后显示出来
   	 this.loadSth=true;
   	 let _this=this;
     var localSearch=new BMap.LocalSearch(point,{
     	 onSearchComplete:(r)=>{
     	 /* var f=localSearch.getStatus();*/
           var resArr=[];
           for(var i=0,len=r.length;i<len;i++){
           	 if(r[i].vr.length>0){
               resArr=resArr.concat(r[i].vr);
           	 }
           }
          _this.addressArr=resArr;
          _this.loadSth=false;
     	}
     });
     localSearch.setPageCapacity(10);
     localSearch.searchNearby(["商场","写字楼","公交站","地铁站","银行","酒店"],point,1000); 
   },

　　ok。。结束