向传单 L.control() 元素添加按钮

Question

我想在传单地图的 L.control() 信息框中添加一个按钮。不管按钮的初衷是什么，现在我只想知道为什么这不起作用（单击按钮时不会调用

info.buttonClicked()

）：

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），而这有效（其余代码相同）：

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

    this._div.innerHTML = '<button style="button" onclick="info.buttonClicked()" id="minimize-btn">x</button>';
    this._div.innerHTML += "some info";

    return this._div;
};

在第一种情况下，我没有看到任何错误消息，但什么也没有发生。为什么？

注意：按照下面的答案之一的建议添加

L.DomEvent.disableClickPropagation(this._div);

并不能解决此问题。

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() 方法在单击按钮时删除控件。

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