小冊子：添加鏈接到標記

很簡單的問題：我如何使地圖標記在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

小冊子：添加鏈接到標記

回答

相關問題