如何在LeafletJS标记中添加一个按钮来运行代码?

Question

我试图在一个打印日志到控制台的指针内添加一个按钮。这只是一个测试，所以我可以让标记运行一个方法，但我甚至不能让它打印文本。

const marker = L.marker([latitude, longitude]).addTo(map);
const button = '<br/><button type="button">Click button</button>'
const clickbutton = document.querySelector("#click");
button1.addEventListener("click", function(event) {
console.log('This button works!');
});
marker.bindPopup(button);

当我加载页面时，我立即得到这个错误:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'addEventListener')

控制台说这个错误是由

引起的

button1.addEventListener("click", function(event) {

，但我不确定为什么它是空的。有人能帮我吗?

Answer 1

您创建的按钮不正确。

它将是这样的:

const button = document.createElement('button');
button.id = 'delete';
button.textContent = 'Delete marker';

为了向页面添加按钮，您需要找到所需的父元素并将按钮作为子元素添加:

// replace this id with what you need
const buttonParrentId = 'button-parrent-id';
const buttonParrent = document.getElementById(buttonParrentId);
buttonParrent.appendChild(button);

接下来，您可以根据需要使用按钮:

const marker = L.marker([latitude, longitude]).addTo(map);
button.addEventListener("click", function(event) {
console.log('This button works!');
});
marker.bindPopup(button);

结果代码示例:

const button = document.createElement('button');
button.id = 'delete';
button.textContent = 'Delete marker';
// replace this id with what you need
const buttonParrentId = 'button-parrent-id';
const buttonParrent = document.getElementById(buttonParrentId);
buttonParrent.appendChild(button);
const marker = L.marker([latitude, longitude]).addTo(map);
button.addEventListener("click", function(event) {
console.log('This button works!');
});
marker.bindPopup(button);

关于createElement的更多信息