javascript - 在 Mapboxgl.js 的弹出窗口中添加一个按钮

Question

如何在弹出窗口中添加按钮并添加 onClick功能？

.setPopup(new mapboxgl.Popup({ offset: 25 })
.setHTML('<button onclick=' + { this.handlePop } + '> Button</button>'))
.addTo(map);

这没用。

Answer 1

我解决问题的方法是使用 设置DOM内容而不是 设置HTML .
这样你就可以像这样轻松地操纵每个元素发生的事情

const name = 'abc';
const innerHtmlContent = `<div style="min-width: 600px;font-size: large;color : black;">
            <h4 class="h4Class">${name} </h4> </div>`;

const divElement = document.createElement('div');
const assignBtn = document.createElement('div');
assignBtn.innerHTML = `<button class="btn btn-success btn-simple text-white" > Assign</button>`;
divElement.innerHTML = innerHtmlContent;
divElement.appendChild(assignBtn);
// btn.className = 'btn';
assignBtn.addEventListener('click', (e) => {
  console.log('Button clicked' + name);
});

const popup = new mapboxgl.Popup({
    offset: 25
  })
  .setDOMContent(divElement);