Leaflet - 從json獲取數據時點擊標記，而不是彈出

標題不是最好的解釋。我創建了一個啤酒味道圖（不包含涉及的地圖圖塊），它爲每個標記使用每個啤酒瓶的自定義圖標。到現在爲止還挺好。Leaflet - 從json獲取數據時點擊標記，而不是彈出

我有地圖，在這裏我想顯示對圖標使用同樣的瓶子PNG（但更大）單擊每個標記時，外面一個div ...

for (var i=0; i < markers.length; ++i) 
{ 
var IconVar = L.icon({ 
    iconUrl: markers[i].bottleurl, 
    shadowUrl: 'images/beer-shadow.png', 
    iconSize: [36, 120], 
    shadowSize: [74, 50], 
    iconAnchor: [16, 60], 
    shadowAnchor: [35, -26], 
    popupAnchor: [0, -65] 
})   

var bigbottleUrl = markers[i].bottleurl; 

L.marker([markers[i].lat, markers[i].lng], {icon: IconVar},) 
    .bindPopup('Text and some custom content bla bla', customOptions) 
    .on('click', function(e){document.getElementById("bigbottle").src = bigbottleUrl;}).addTo(beermap); 
}

這對一個點起作用，但默認爲從json文件設置的最後一個標記。也許我不能從循環中調用不同的變量，或者我沒有正確設置循環。

我已經看了很多問題在這裏，並嘗試使用e.popup._source和this.option和this.option更具體，並使其具體使用_leaflet_id但我推遠遠超出我對JavaScript的理解！

任何想法？

來源

2017-11-25 Cmeet

喜歡的顏色！ :-) – ghybs

這是一個經典的JavaScript初學者的錯誤。尋找閉包，回調和綁定值。 – ghybs

我希望避免這種情況，並做一些簡單的事情！我想加載的圖像是標記，這是接近... [onclick]（https://stackoverflow.com/questions/10270937/how-to-get-image-source-path-on-onclick-event-的 - 即圖像點擊） – Cmeet

經過幾次死亡後，這是解決方案。

var imgUrl; 

document.addEventListener('DOMContentLoaded', function() { 
    document.addEventListener('click', function(event) { 
     if (event.target.className == 'leaflet-marker-icon leaflet-zoom-animated leaflet-interactive') { 
     var imgSrc = event.target.src; 
     var imgFile = imgSrc.substring(imgSrc.lastIndexOf('/')+1); 
     imgUrl = 'images/' + imgFile; 
     document.getElementById("bigbottle").src = imgUrl; 
     } 
    }); 
});

有可能有點冗餘代碼，但是這是最有效的方式，不把onClick事件到任何東西，或者具有複雜變量，我不知道如何構建！

來源

2017-12-22 23:52:51 Cmeet

Leaflet - 從json獲取數據時點擊標記，而不是彈出

回答

相關問題