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

时间:2013-07-13 17:06:00

标签: javascript map leaflet

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

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

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

我最好如何做到这一点?

1 个答案:

答案 0 :(得分:14)

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

例如:

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