javascript - 如何从地图外的链接打开传单标记弹出窗口？

Question

我有一张带有几个标记的传单地图。

每个标记都有相似的 html

 <img class="leaflet-marker-icon leaflet-clickable leaflet-zoom-animated" src="leaflet/dist/images/marker-icon.png" style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; transform: translate(435px, 200px); z-index: 200;" title="location_1">

单击标记时，会在标记上方打开弹出窗口。

我想做的是在地图之外添加与每个标记相关的链接。

每个标记都有一个唯一的标题。那么我可以创建一个html链接列表，标题作为标识符，例如

 <a class="location_1">location 1</a>
 <a class="location_2">location 2</a>

然后将这些链接绑定到传单地图中的相应标记？

我将如何最好地实现这一目标？

Answer 1

如果将标记添加到数组中，则根据元素的属性检查它们将非常简单。

例如：

var markers = [];
var marker1 = L.marker([51.497, -0.09],{title:"marker_1"}).addTo(map).bindPopup("Marker 1");
markers.push(marker1);
var marker2 = L.marker([51.495, -0.083],{title:"marker_2"}).addTo(map).bindPopup("Marker 2");
markers.push(marker2);
var marker3 = L.marker([51.49, -0.097],{title:"marker_3"}).addTo(map).bindPopup("Marker 3");
markers.push(marker3);

function markerFunction(id){
    for (var i in markers){
        var markerID = markers[i].options.title;
        if (markerID == id){
            markers[i].openPopup();
        };
    }
}

$("a").click(function(){
    markerFunction($(this)[0].id);
});

看到它在这个小提琴中工作