我有一张带有几个标记的传单地图。
每个标记都有类似的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>
然后将这些链接绑定到传单地图中的相应标记?
我最好如何做到这一点?
答案 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