将按钮添加到Mapboxgl.js中的弹出窗口 [英] Adding a button to the popup in Mapboxgl.js

问题描述

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

How to add a button to the popup and add an onClick to the function?

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

它不起作用.

推荐答案

我解决问题的方法是使用 setDOMContent 而不是 setHTML .

The way I solved the problem was to use setDOMContent instead of setHTML .

这样，您可以像这样轻松地操纵每个元素发生的事情

This way you can easily manipulate what happens with each element like so

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);

这篇关于将按钮添加到Mapboxgl.js中的弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！