如何在LeafletJS标记点内添加可触发代码运行的按钮？

• 变量未定义：代码中没有声明过button1变量，直接调用该变量的addEventListener方法触发空对象报错
• 元素匹配失败：你拼接的按钮HTML没有添加id="click"属性，document.querySelector("#click")的返回值永远为null
• 执行时机错误：Leaflet的Popup内容默认不会提前插入页面DOM树，只有标记点被点击、弹窗实际弹出时才会渲染对应元素，页面初始化阶段无法查找到弹窗内的元素

推荐使用监听Popup打开事件的方案，稳定性更高：

const marker = L.marker([latitude, longitude]).addTo(map);
// 给按钮添加唯一id用于选择
const buttonHtml = '<br/><button id="test-popup-btn" type="button">Click button</button>'
marker.bindPopup(buttonHtml);

// 监听弹窗打开事件，此时弹窗内的元素已经完成渲染
marker.on('popupopen', () => {
  const testBtn = document.querySelector('#test-popup-btn');
  testBtn.addEventListener('click', () => {
    console.log('This button works!');
    // 后续自定义方法可以直接在这里调用
  });
});

如果是简单测试逻辑，也可以直接用内联事件绑定，无需手动处理渲染时机：

const marker = L.marker([latitude, longitude]).addTo(map);
const buttonHtml = '<br/><button type="button" onclick="console.log(\'This button works!\')">Click button</button>'
marker.bindPopup(buttonHtml);

内容的提问来源于stack exchange，提问作者firecode85