как добавить событие клика на маркер в leaflet.js

Question

Я пытаюсь добавить событие щелчка для каждого маркера в цикле. Пожалуйста, смотрите код js.

Я разрабатываю карту с несколькими нажимаемыми маркерами с листовками и OpenStreetMap.

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.

Answer 1

@ Ответ Дениса очень элегантный (я не знал этого синтаксиса)

«Классическим» способом было бы добавить свойство к вашему маркеру и извлечь значение из цели события

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);
});

Answer 2

Используйте функцию стрелки для обработки клика. Разница в том, что в момент определения функции будет записано значение i.

  markers[i].on('click',()=> {
    console.log(i);//in this code, the output i is always the length of the array
  });