百度地图 鼠标绘制工具BUG修复(地图自动平移)

在使用鼠标绘制工具绘制多边形时,发现鼠标离开地图边缘会导致地图自动平移,通过自定义鼠标移动事件和判断鼠标是否超出绘制范围,成功解决了地图自动平移的问题。

开发项目时用到了鼠标绘制工具,绘制多边形时,鼠标离开地图后,地图会自动平移。用close方法也停止不了。

看下源码中这样的代码:

/**
      * 开启鼠标到地图边缘,自动平移地图
      */
     Mask.prototype.enableEdgeMove = function() {
         this._enableEdgeMove = true;
     }
 
     /**
      * 关闭鼠标到地图边缘,自动平移地图
      */
     Mask.prototype.disableEdgeMove = function() {
         clearInterval(this._edgeMoveTimer);
         this._enableEdgeMove = false;
     }

发现在绘制开始时会调用mask.enableEdgeMove (); 结束时会调用mask.disableEdgeMove();还有其他地方调用。总之就是这里的原因啦!我是这样改的:

/**
          * 鼠标移动过程的事件
          */
         var mousemoveAction = function(e) {
             //自定义---如果超出范围,禁止地图自动平移
            if(me._outRange){
               mask.disableEdgeMove();
                return;
            }
             overlay.setPositionAt(drawPoint.length - 1, e.point);
         }

outRange是我自定义的,标志鼠标是否超出绘制范围。如果超出范围,就禁止地图自动平移。这样就可以解决我的问题了。时间有限,就先这么着了。

VUE页面相关代码:

mounted(){
  var _this=this;
  _this.drawingManager = new BMapLib.DrawingManager(_this.map, {
       isOpen: true, //是否开启绘制模式
       enableDrawingTool: false, //是否显示工具栏
       drawingToolOptions: {
             anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
             offset: new BMap.Size(5, 5), //偏离值
             drawingModes: [
                 BMAP_DRAWING_POLYGON
        ]
    },
    polygonOptions: _this.styleOptions, //多边形的样式
    outRange:false,
    hasLabel:false
  });
  _this.drawingManager.enableCalculate();
  _this.drawingManager.setDrawingMode(BMAP_DRAWING_POLYGON);
},

methods:{
    //添加多边形层并显示,如果添加了或修改了某网格,则所有子网格重新画一遍
    drawPolygon(){
        var child="";
        for(var c=0;c<this.parentArea.children.length;c++){
            child=this.parentArea.children[c];
            var ply = new BMap.Polygon(child.points, { strokeWeight: 1, strokeColor: child.gridcolor, fillOpacity: 0.2, fillColor: child.gridcolor }); //建立多边形覆盖物
            ply.id=child.Id;
            ply.addEventListener("mouseover", this.mouseover);
            ply.addEventListener("mouseout", this.mouseout);
            if(this.id==child.Id){
                        this.companyMap.acreage=child.acreage;
                        this.companyMap.points= child.points;
                        ply.setFillColor(child.gridColor);
                        this.drawingManager.close();
                        this.drawPly=ply;
             }
             this.map.addOverlay(ply);
             this.childPlyArr.push(ply);
          }
     },
     //子网格鼠标移入事件,如果正在绘制,并且绘制模式为选中状态
     mouseover(evt) {
         if(this.drawingManager._isOpen && this.drawingManager.getDrawingMode()!='marker'){
                if(!this.drawingManager._outRange){
                    this.drawingManager.outRangeAction();
                }
            }
          },
      mouseout(evt) {
            if(this.drawingManager._isOpen && this.drawingManager.getDrawingMode()!='marker'){
                if(this.drawingManager._outRange){
                    this.drawingManager.inRangeAction();
                }
            }
          },
      //绘制完成
      overlaycomplete(e){
            if(e.calculate==null){
                  alert("面积为0,请重绘");
                  this.map.removeOverlay(e.overlay);
                  return;
            }
            //如果结果的点不在区域内,则删除并出范提示超围
              var pointsArr=e.overlay.getPath();//保存在数组库
              var inrange=true;
              for(var i=0;i<pointsArr.length;i++){
                  //判断点是否在父网格范围内,不在则超出范围
                  for(var j=0;j<this.parentPly.length;j++){
                      inrange=BMapLib.GeoUtils.isPointInPolygon(pointsArr[i], this.parentPly[j]);
                      if(inrange)break;
                  }
              }
              if(!inrange){
                  alert("超出范围");
                  this.map.removeOverlay(e.overlay);
                  return;
              }
            this.drawPly=e.overlay;
            var resultPoints="";
              for(var i=0;i<pointsArr.length;i++){
                  var end=(i==pointsArr.length-1)?"":";";
                  resultPoints+=pointsArr[i].lng+","+pointsArr[i].lat+end;
              }
            this.companyMap.points=resultPoints;
            this.companyMap.acreage=e.calculate;//面积
      }
}

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值