在 Mapboxgl.js 的彈出窗口中添加一個按鈕

Question

如何在彈出窗口中添加按鈕並將onClick添加到 function？

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

這沒用。

Answer 1

我解決問題的方法是使用setDOMContent而不是setHTML 。

這樣你就可以像這樣輕松地操縱每個元素發生的事情

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

Answer 2

您可以使用此按鈕將EventListner 添加到按鈕。

const btn = document.getElementsByClassName("btn")[0];
btn.addEventListener("click", () => {
      console.log("hello");
});

我在這里添加了 React 的工作示例。 你可以在這里找到

var popup = new mapboxgl.Popup()
      .setLngLat([-96, 37.8])
      .setHTML(
        `<h1>Hello World!</h1> 
    <button class="btn" ref=${this.buttonRef.current}>todo</button>`
      )
      .addTo(map);
    const btn = document.getElementsByClassName("btn")[0];
    btn.addEventListener("click", () => {
      console.log("hello");
    });

Answer 3

在 function 下面將為給定坐標添加一個彈出按鈕。 希望它會有所幫助！

map.on('click',function() {
    var coordinates = [-77.03171253204346, 38.91457788952212];
    var description = "<button onclick=' + { this.handlePop } + '> Button</button>"
    new mapboxgl.Popup()
        .setLngLat(coordinates)
        .setHTML(description)
        .addTo(map);
});

另請參閱Mapbox 文檔，它非常方便且干凈！

完整的代碼片段

 mapboxgl.accessToken = 'place your mapbox token'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11', center: [-77.04, 38.907], zoom: 11.15 }); map.on('load', function() { map.on('click',function() { var coordinates = [-77.03171253204346, 38.91457788952212]; var description = "<button onclick=' + { this.handlePop } + '> Button</button>" new mapboxgl.Popup().setLngLat(coordinates).setHTML(description).addTo(map); }); // Change the cursor to a pointer when the mouse is over the places layer. map.on('mouseenter', 'places', function() { map.getCanvas().style.cursor = 'pointer'; }); // Change it back to a pointer when it leaves. map.on('mouseleave', 'places', function() { map.getCanvas().style.cursor = ''; }); });

 body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; }.mapboxgl-popup { max-width: 400px; font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif; }

 <div id="map"></div>