問題描述

我有一張帶有多個標記的傳單地圖.

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

這篇關于如何從地圖外的鏈接打開傳單標記彈出窗口?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！