javascript - 如何在 leaflet.js 中的标记上添加点击事件

Question

我正在尝试为循环中的每个标记添加一个点击事件。请看js代码。

我正在开发一张带有多个可点击标记、传单和 OpenStreetMap 的 map 。

var markers = [];

for (var i=0; i < selectedLocations.length; i++) 
{
  var image = selectedLocations[i].properties.image;
  var image_alt = selectedLocations[i].properties.image_alt;
  var name = selectedLocations[i].properties.name;
  var coords = selectedLocations[i].geometry.coordinates;
//set content in the infoWindow 
  const content = `<div id="infoWindow" style="width:150px; margin:2px;">
    <h2 style="font-size:14px; text-align:center;">${name}</h2>
    <img src="${image}" alt="${image_alt}" height="100px" width="150px">
    </div>`;

  markers[i] = L.marker([coords[1],coords[0]]).bindPopup(content).addTo(map);   
  markers[i].on('click',function(i){
    console.log(i);//in this code, the output i is always the length of the array
  });
}

我正在尝试根据值 i 调用一个函数。但无论我点击哪个标记，i 始终是数组的长度，而不是当前的 I 值。

Answer 1

@Denis 的回答很优雅(我不知道这个语法)

“经典”方式是向您的标记添加属性并从事件目标中获取值

markers[i] = L.marker([coords[1],coords[0]]).bindPopup(content).addTo(map); 
markers[i].id = i;  
markers[i].on('click',function(event){
  console.log(event.target.id);
});