为什么传单 L.control() 元素中的这个按钮不起作用？

Question

我想向 leafletjs 地图的 L.control() 信息框添加一个关闭按钮：

let map;

map = L.map("map").setView([45.0, 0.0], 8);

var tiles = L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
  maxZoom: 19,
}).addTo(map);

let info = L.control();

info.onAdd = function (map) {
  this._div = L.DomUtil.create("div", "info");

  var button = L.DomUtil.create('button', 'close-btn', this._div);
  button.innerHTML = 'x';
  button.style.float = 'right';

  button.addEventListener('click', function() {
    console.log('buttonClicked event');
    info.buttonClicked();
  });

  this._div.innerHTML += "some info";

  return this._div;
};

info.buttonClicked = function() { 
  console.log('info.buttonClicked() called');
  //this._div.innerHTML += ''; 
};

info.addTo(map);

（完整示例here）但似乎单击按钮没有实现任何目的。我尝试了很多版本（请参阅注释掉的代码），但没有运气。

我没有看到任何错误，但我也没有看到任何

console.log()

调用。

我尝试使用

L.DomEvent

将点击绑定到

buttonClicked()

:

L.DomEvent.on(button, 'click', function() {
    info.buttonClicked();
});

我还尝试使用

const newButton = document.createElement('button');

而不是

L.DomUtil.create()

创建按钮。

在许多不同的浏览器中对此进行了测试。还是没有运气。

为什么？

Answer 1

出现此问题的原因是 Leaflet 的 L.DomEvent 系统拦截地图上的事件，并可能阻止事件传播到添加到地图控件或图层的元素。具体来说，当使用 L.DomUtil.create() 创建元素并将其附加到地图的 DOM 时，Leaflet 可能会阻止或修改默认事件行为，例如单击。

要解决此问题，您需要确保事件正确传播并且不会被 Leaflet 的事件处理系统停止。

以下是修复代码的方法：

 let map;

map = L.map("map").setView([45.0, 0.0], 8);

var tiles = L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
  maxZoom: 19,
}).addTo(map);

let info = L.control();

info.onAdd = function (map) {
  this._div = L.DomUtil.create("div", "info");

  // Create the close button
  var button = L.DomUtil.create("button", "close-btn", this._div);
  button.innerHTML = "x";
  button.style.float = "right";

  // Ensure Leaflet doesn't block the button's click events
  L.DomEvent.disableClickPropagation(this._div);

  // Attach the click event
  button.addEventListener("click", () => {
    console.log("buttonClicked event");
    info.buttonClicked();
  });

  // Add some informational content
  this._div.innerHTML += "some info";

  return this._div;
};

info.buttonClicked = function () {
  console.log("info.buttonClicked() called");
  // Remove the control from the map
  map.removeControl(info);
};

// Add the control to the map
info.addTo(map);

主要修复和说明：

禁用点击传播：

L.DomEvent.disableClickPropagation(this._div) 行；确保对信息控件（包括按钮）的点击不会传播到地图。如果没有这个，Leaflet 可能会将点击视为地图交互，从而干扰按钮的事件处理。

事件监听器：

使用标准的button.addEventListener("click", ...) 将点击事件绑定到按钮。只要禁用ClickPropagation 就位，这就可以正常工作。

删除控制：

info.buttonClicked() 方法演示了如何使用removeControl() 方法在单击按钮时删除控件。

测试： 将此代码放入您的项目中并验证该按钮是否正常工作。 打开浏览器控制台并确认单击按钮会记录适当的消息并从地图中删除控件。