提问人:Andrea Lombardi Design 提问时间:10/19/2023 最后编辑:Foo HaaAndrea Lombardi Design 更新时间:10/19/2023 访问量:39
leafletjs - 如何访问在标记内创建的html?
leafletjs - How to access the html created inside the marker?
问:
使用 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);
});
答:
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"));
});
此外,请考虑将所有标记添加到图层中,并在循环之后将图层添加到地图中。使用单层更容易操作
评论