Leaflet - 在标记点击时从json获取数据，而不是弹出窗口

Posted 2021-04-13

标题不是最好的解释。我正在创建一个啤酒风味图（不涉及地图图块），每个标记使用每个啤酒瓶的自定义图标。到现在为止还挺好。

screenshot of the current build

我在地图外面有一个div，我想在点击每个标记时显示用于图标的相同的瓶子png（但更大）...

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的理解！

有任何想法吗？

答案

在经历了几个死胡同之后，这就是解决方案。

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事件放在所有内容上或者有一个我不知道如何构造的复杂变量！