很简单的问题:我怎样才能使单张点击和路线地图标记用户到其他页面? 每一个标志都有自己的页面。
我试过没有成功以下; 不知何故所有标记指向同一个页面,这是最后一次分配的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。 这可以通过在目标对象中获取,并且还设置为它已被添加到地图后自定义值。
所以,最终的解决方案很简单:
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;
}
(I取代了在for循环与反转while循环)
你也可以使用它可以显示HTML的弹出
marker.bindPopup(HTML字符串);
我发现了一个类似的代码,它可以帮助你。 这里的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 © 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);
}