传单:添加标记的链接

问题描述

非常简单的问题:如何使 Leaflet 中的地图标记可点击并将用户引导到其他页面?每个标记都有自己的页面.

Pretty simple question: How can I make the map markers in Leaflet clickable and route the user to an other page? Every marker has its own page.

我尝试了以下方法但没有成功；不知何故，所有标记都指向同一个页面，这是最后分配的 URI.

I've tried the following without success; somehow all the markers point to the same page, which is the last assigned URI.

var markers = [
    { coords: [51.505, -0.09], uri: '/some-page' },
    ...
];

for(x in markers)
{
    L.marker(markers[x].coords).on('click', function() {
        window.location = markers[x].uri;
    }).addTo(map);
}

这个问题真让我抓狂.

推荐答案

好吧，我终于找到解决方案了；当标记添加到地图时，它会被分配一个名为_leaflet_id"的 ID.这可以通过目标对象获取，也可以在将其添加到地图后设置为自定义值.

Okay, I finally came to a solution; when a marker is added to the map it gets assigned an ID called "_leaflet_id". This can be fetched through the target object, and also set to a custom value after it has been added to the map.

所以最终的解决方案很简单:

So the final solution is simply:

var x = markers.length;

while(x--)
{
    L.marker(markers[x].coords).on('click', function(e) {
        window.location = markers[e.target._leaflet_id].uri;
    }).addTo(map)._leaflet_id = x;
}

(我用反向的while循环替换了for-in循环)

(I replaced the for-in loop with a reversed while loop)

这篇关于传单:添加标记的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！