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

2022-01-12 00:00:00 leaflet javascript map

我有一张带有多个标记的传单地图.

I have a leaflet map with several markers on.

每个标记都有相似的 html 到

Each of the markers have similar html to

 <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">

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

When the marker is clicked the popup opens above the marker.

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

What im trying to do is add links outside of the map, relating to each marker.

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

Each of the markers have a unique title. So could I just create a list of html links, with the title as an identifier such as 

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

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

Then bind these links to the corresponding marker in the leaflet map?

我怎样才能最好地实现这一目标?

How would I best achieve this?

推荐答案

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

if you add the markers to an array, it would be pretty straightforward to check them against attributes of your element.

例如:

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

相关文章