如何防止自定义控件缩放或单击地图

Question

我在缩放控件下创建了一个自定义控件，当我点击它时，会触发地图上的点击，这是我不想要的，如果我双击，也会触发缩放。

我已经设法使用 e.stopPropagation() 修复了点击触发，但我不知道如何管理缩放。

let MyControlClass =  L.Control.extend({  
  options: {
    position: 'topleft',
  },

  onAdd: function(map) {
    this.map = map;

    var div = L.DomUtil.create('div', 'leaflet-bar my-control');
    var flyToButton = L.DomUtil.create('button', 'my-button-class', div);

    flyToButton.innerHTML = `<a href="#" role="button" title="Voler vers" class=""><i class="fa-solid fa-reply-all fa-flip-horizontal"></i></a>`;

    L.DomEvent.on(flyToButton, 'click', function(e) {
      e.stopPropagation();
    }, this);

    return div;
  }
});
let myControl = new MyControlClass().addTo(map);

你能帮我吗？谢谢。

Answer 1

您也可以使用

L.DomEvent.disableClickPropagation

:

const div = L.DomUtil.create('div', 'leaflet-bar my-control');
// ...
L.DomEvent.disableClickPropagation(div);