Tờ rơi: Thêm liên kết vào các điểm đánh dấu

Question

Câu hỏi đơn giản: Làm cách nào để tôi có thể đánh dấu bản đồ trong Leaflet có thể nhấp và định tuyến người dùng đến trang khác? Mỗi điểm đánh dấu đều có trang riêng.

Tôi đã thử những điều sau mà không thành công; bằng cách nào đó tất cả các điểm đánh dấu trỏ đến cùng một trang, đó là URI được chỉ định cuối cùng.

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

Vấn đề này thực sự khiến tôi phát điên.

Answer 1

Được rồi, cuối cùng tôi đã đến một giải pháp; khi một điểm đánh dấu được thêm vào bản đồ, nó sẽ được gán một ID gọi là "_leaflet_id". Điều này có thể được tìm nạp thông qua đối tượng đích và cũng được đặt thành giá trị tùy chỉnh sau nó đã được thêm vào bản đồ.

Vì vậy, giải pháp cuối cùng chỉ đơn giản là:

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

(Tôi đã thay thế cho trong vòng lặp với một đảo ngược trong khi vòng lặp)

Answer 2

Bạn cũng có thể sử dụng một popup có thể hiển thị HTML

marker.bindPopup (htmlString);

Answer 3

tôi đã tìm thấy mã tương tự có thể giúp bạn. ở đây là liên kết 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); 
    }