leafletjs - 如何访问标记内创建的 html？

Question

我使用 leafletjs 在地图上创建了一系列标记，所有标记都从 JavaScript 数组循环。我还添加了一些 html，包括屏幕上的“我在这里”按钮。我希望能够访问该按钮来创建一系列事件。我的想法是通过 JS 再次增加段落中的数字。

我该怎么办？

luoghi.forEach(function (info) {
    let marker = L.marker([info.latitudine, info.longitudine], { icon: iconaPedone });
    let infoLuogo =
        `
    <div class="box-informazioni">
    <h3 class="nome-scheda">${info.nome}</h3>
    <p class="linea-p"></p>
    <p>Tipo: lxxuogo comune o circolo</p>
    <p>Aperto da: <strong>LUN-VEN ore 10-18</strong></p>
    <p class="giocatori-presenti">Giocatori presenti: <strong>10</strong></p>
    <div class="box-pulsanti">
    <a class="link-segnalazione" href="#">Sono qui</a>
    <a class="link-coordinate" href="https://www.google.com/maps/place/${info.latitudine},${info.longitudine}">Vai al luogo</a>
    </div>
    </div>

    `;

    
    let gpsLuogo = infoLuogo.toString();
    marker.bindPopup(gpsLuogo);
    marker.addTo(map);

});

Answer 1

也许这会对你有帮助，我无法发表评论，因为我没有 50 点声誉。

您可以向按钮添加一些数据标签。像这样：

<a class="link-segnalazione" data-lng="${info.longitudine}" data-lat="${info.latitudine}" href="#">Sono qui</a>

因此，例如，您可以使用 jquery 获取这些值，如下所示：

$('.link-segnalazione').click(function(){
   // Log the location
   console.log($(this).data("lat"), $(this).data("lng"));
});

此外，考虑将所有标记添加到图层中，并在循环后将图层添加到地图中。使用单层更容易操作