小册子：添加链接到标记

很简单的问题：我如何使地图标记在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); 
}

这个问题真的让我发疯。

来源

2012-12-19 Ivar

好的，我终于找到了解决办法;当一个标记被添加到地图时，它会被分配一个名为“_leaflet_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; }

（我取代了，在环路反向while循环）

来源

2012-12-19 15:38:36 Ivar

你不应该使用'for..in'循环迭代数组。另外，你在全局范围内泄漏'x';使用'var'。 – josh3736

你是对的 - 我改为一个while循环。谢谢。 – Ivar

你也可以使用它可以显示HTML的弹出

marker.bindPopup（htmlString）;

来源

2012-12-23 18:14:05 dnns

是的，但用户必须点击两次而不是一次。 – Ivar

地图标记通常不会打开新的URL，因此弹出窗口将是首选方式。你可以自动触发它，它会显示，或悬停。用户应该知道当他们与您提供的对象进行交互时会发生什么，否则您会感到沮丧的用户。 – knownasilya

我找到了一个类似的代码，可以帮助你。这里是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); 
    }

来源

2015-08-18 09:00:27 Mou

小册子：添加链接到标记

回答

相关问题