リーフレット - マーカークリックでポップアップではなくjsonからデータを取得

Question

タイトルは最良の説明ではありません。私は、各ビール瓶のカスタムアイコンを各マーカーに使用するビールフレーバーグラフ（地図タイルは関係ありません）を作成しています。ここまでは順調ですね。

各マーカーをクリックしたときに、私は同じボトルのアイコンに使用PNG（より大きな）を表示するマップ、外のdivを持って

screenshot of the current build

...

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を使って具体的にしてみました。具体的には_leaflet_idを使っていますが、私はJavaScriptの理解を超えています！

アイデア？

Answer 1

いくつかのデッドエンドを行った後、これが解決策でした。

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イベントを入れたり、私が構築する方法を知りませんでした複素変数を持っていました！