leaflet-div上禁止地图的拖动,放大缩小双击事件

1. 先把dom的div对象获取到,可用document.getEleementById(“divId”);


    //获取当前的this对象
    const that = this;

    //获取要操作的div对象,可根据docoment.getElementById("divId");
    const el = document.getElementById("divId");

 

 

   2. 鼠标移入时禁止leaflet的拖拽事件

    setTimeout(() => {
      this.monthChartPanel.hostElement.onmouseover = function () {
        that.leafletService.map.dragging.disable();
      }
    });

   

 

 3. 鼠标移出时加上leaflet的拖拽事件

    setTimeout(() => {
      this.monthChartPanel.hostElement.onmouseout = function () {

        //that.leafletService.map就是获取的当前的地图map
        that.leafletService.map.dragging.enable();
      }
    });

 

 

    4. 根据el点击事件和平移事件,把leaflet的放大缩小和平移给禁掉

   

    L.DomEvent.addListener(el, 'click', function (e) {
      L.DomEvent.preventDefault(e);
    });

    L.DomEvent.addListener(el, 'mousedown dblclick', function (e) {
      L.DomEvent.stopPropagation(e);
    });

 

转载自:https://blog.csdn.net/qq_34790644/article/details/81484587

You may also like...