Question

非常简单的问题：如何使Leaflet中的地图标记可点击并将用户路由到另一个页面？每个标记都有自己的页面。

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

这个问题确实让我疯狂。

Answer 1

好的，我终于找到了解决方案;当标记添加到地图时，会为其分配一个名为＆＃34; _leaflet_id＆＃34;的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循环）

Answer 2

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

marker.bindPopup（htmlString）;

Answer 3

我发现了一个类似的代码，可以帮到你。这里是jsfiddle链接http://jsfiddle.net/farhatabbas/qeJ78/

 $(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 &copy; 2011 OpenStreetMap contributors, Imagery &copy; 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);
    }

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

3 个答案: