带外部按钮的传单

Question

我的传单卡片可以正常使用以下代码。如果单击标记，还会打开一个包含地址的弹出窗口。现在我想在外部为每个创建标记的站点创建一个按钮，同时在地图上显示带有地址的弹出窗口。数据可以通过按钮传递。它像这样工作吗，顺便说一句。有没有人知道如何更改代码以及如何在按钮中编写函数（？）？

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet Map</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha402-xodZBNTC5n17Xt2aocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19sSR7A=="
    crossorigin=""/>
</head>
<body>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha402-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrUearIOnxwA=="
crossorigin=""></script>

<div id="map" style="width: 100%; height: 540px"></div>

<script>
var planes = [
["<b>Aral tkst</b><br>Fribert-Str. 14",40.6027069,7.185095],
["<b>Esso tkst</b><br>Alee 63",40.603758,7.16498],
["<b>Shell tkst</b><br>Hener Str. 100",40.609695,7.181562],
["<b>Jet tkst</b><br>Kullee 5",40.6057,2.90240],
["<b>Total tkst</b><br>Caper Str. 123",40.604639,2.914727],
["<b>Shell tkst</b><br>Blistr. 97",40.593768,2.920507],
["<b>Bavaria tkst</b><br>Bumer Str. 1",40.5827866,2.913093],
["<b>Markant tkst</b><br>Her Str.  249",40.58409,2.91258],
];
var map = L.map('map').setView([40.58903, 7.17594], 13)

var circle = L.circle([40.58903, 7.17594], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 150
}).addTo(map);

circle.bindPopup("<b>Eigene Adresse:</b><br>Weg 1");

mapLink = 
'<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; ' + mapLink + ' bvchim',
maxZoom: 18,
}).addTo(map);

for (var i = 0; i < planes.length; i++) {
marker = new L.marker([planes[i][1],planes[i][2]])
.bindPopup(planes[i][0])
.addTo(map);
}
               
</script>
</body>
</html>

Answer 1

您可以使用此代码：


var container = document.getElementById('button-container');
for (var i = 0; i < planes.length; i++) {
  var marker = new L.marker([planes[i][1],planes[i][2]])
    .bindPopup(planes[i][0])
    .addTo(map);
     
   var btn = document.createElement('button');
   btn.id = L.stamp(marker); // set the id of the marker as button id
   btn.innerHTML = planes[i][0];
   
   L.DomEvent.on(btn,'click',(e)=>{
    var target = e.target;
    if(target.nodeName !== "BUTTON"){ // Needed because the target can also be the <b> Element
        target = target.parentNode;
    }
    var btn2 = target
    var marker2 = map._layers[btn2.id]; // get marker over id
    var latlng = marker2.getLatLng();
    map.panTo(latlng);
    marker2.openPopup();    
   })
   container.appendChild(btn);
}

https://jsfiddle.net/falkedesign/my0o5Lav/

带外部按钮的传单

Leaflet with extern Button

button

leaflet

extern