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

leafletjs - How to access the html created inside the marker?

提问人:Andrea Lombardi Design 提问时间:10/19/2023 最后编辑:Foo HaaAndrea Lombardi Design 更新时间:10/19/2023 访问量:39

问:

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

});
JavaScript 词典 活动 传单 google-maps-markers

评论


答:

0赞 Foo Haa 10/19/2023 #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"));
});

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