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

Question

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

每个标记都有相似的 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">

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

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

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

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

然后将这些链接绑定(bind)到传单 map 中的相应标记？

我怎样才能最好地实现这一点？

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);
});

查看它在这个 fiddle 中的工作