如何从地图外部的链接中打开传单标记弹出窗口? [英] How to open leaflet marker popup from link outside of map?

查看:94
本文介绍了如何从地图外部的链接中打开传单标记弹出窗口?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一张传单地图,上面有几个标记.

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

在此小提琴

这篇关于如何从地图外部的链接中打开传单标记弹出窗口?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆