Javascript 传单：添加指向标记的链接

非常简单的问题：如何使传单中的地图标记可点击，并将用户发送到其他页面？每个标记都有自己的页面

我尝试了以下方法，但没有成功；不知何故，所有标记都指向同一个页面，这是最后分配的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);
}

---

这个问题真的快把我逼疯了。

好吧，我终于找到了解决办法；将标记添加到地图时，会为其分配一个名为“\u传单\u ID”的ID。这可以通过目标对象获取，也可以在将其添加到地图后设置为自定义值

因此，最终的解决方案很简单：

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

---

（我将for-in循环替换为反向while循环）

您还可以使用一个可以显示HTML的弹出窗口

---

marker.bindpoop（htmlString）

我发现了一个类似的代码，可能对您有所帮助。这里是jsfiddle链接

$（文档）.ready（函数（）{
初始化映射（）；
添加_标记（）；
});
var映射；
函数init_map（）{
map=L.map（'map'）.setView（[37.8，-96]，4）；
L.tileLayer（'http://{s}.tile.cloudmake.com/{key}/22677/256/{z}/{x}/{y}.png'{
属性：“地图数据和副本；2011 OpenStreetMap贡献者，图像和副本；2012 CloudMake”，
键：“BC9A493B41014CAAB98F0471D759707”
}).addTo（地图）；
}
函数add_marker（）{
变量点=[
[“P1”，43.059908，-89.442229http://www.url_address_01.com/"],
[“P2”，43.058618，-89.442032http://www.url_address_02.com/"],
[“P3”，43.058618，-86.441726http://www.url_address_03.com/"]
];
var标记=[]；
var i；
对于（i=0；i

您不应该在循环中为..使用

来迭代数组。此外，您正在向全局范围泄漏
x
；使用
var
.True，但是用户必须单击两次而不是一次。地图标记通常不会打开新的URL，因此弹出窗口是首选方式。你可以自动触发它，它只会显示，或者悬停。用户应该知道当他们与你给他们的对象交互时会发生什么，否则你会让用户感到沮丧。
 $(document).ready(function () {
        init_map();
        add_marker();
    });
    var map;

    function init_map() {
        map = L.map('map').setView([37.8, -96], 4);
        L.tileLayer('http://{s}.tile.cloudmade.com/{key}/22677/256/{z}/{x}/{y}.png', {
            attribution: 'Map data © 2011 OpenStreetMap contributors, Imagery © 2012 CloudMade',
            key: 'BC9A493B41014CAABB98F0471D759707'
        }).addTo(map);
    }

    function add_marker() {
        var points = [
            ["P1", 43.059908, -89.442229, "http://www.url_address_01.com/"],
            ["P2", 43.058618, -89.442032, "http://www.url_address_02.com/"],
            ["P3", 43.058618, -86.441726, "http://www.url_address_03.com/"]
        ];
        var marker = [];
        var i;
        for (i = 0; i < points.length; i++) {
            marker[i] = new L.Marker([points[i][1], points[i][2]], {
                win_url: points[i][3]
            });
            marker[i].addTo(map);
            marker[i].on('click', onClick);
        };
    }

    function onClick(e) {
        console.log(this.options.win_url);
        window.open(this.options.win_url);
    }