Как узнать, какой маркер был нажат из массива маркеров карты google

Question

У меня есть массив объектов-маркеров markers. Затем я использую цикл for, чтобы добавить к ним прослушиватели событий. Тем не менее, я не могу понять, как определить, на что щелкнули маркеры.

Вот код, у меня сейчас:

for(var i = 0; i < this.markers.length; i++) //adds listener to all markers 
{ 
     google.maps.event.addListener(this.markers[i], "click",() => 
     { 
      //need to get access to which marker was clicked 
     }); 
} 

Я пытался передать аргументы функции стрелки, но ничего не похоже на работу. Есть идеи? Функция стрелки не требуется, если функция может возвращать указатель правильного маркера.

Answer 1

Пожалуйста, прочитайте документацию: https://developers.google.com/maps/documentation/javascript/events#EventClosures

Вот рабочий пример:

function initialize() { 
 

 
    var mapOptions = { 
 
    zoom: 5, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    center: new google.maps.LatLng(1, 1) 
 
    }; 
 

 
    var locations = [ 
 
    [new google.maps.LatLng(0, 0), 'Marker 1', 'Infowindow content for Marker 1'], 
 
    [new google.maps.LatLng(0, 1), 'Marker 2', 'Infowindow content for Marker 2'], 
 
    [new google.maps.LatLng(0, 2), 'Marker 3', 'Infowindow content for Marker 3'], 
 
    [new google.maps.LatLng(1, 0), 'Marker 4', 'Infowindow content for Marker 4'], 
 
    [new google.maps.LatLng(1, 1), 'Marker 5', 'Infowindow content for Marker 5'], 
 
    [new google.maps.LatLng(1, 2), 'Marker 6', 'Infowindow content for Marker 6'] 
 
    ]; 
 

 
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 

 
    var infowindow = new google.maps.InfoWindow(); 
 

 
    for (var i = 0; i < locations.length; i++) { 
 

 
    var marker = new google.maps.Marker({ 
 
     position: locations[i][0], 
 
     map: map, 
 
     title: locations[i][1] 
 
    }); 
 

 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 

 
     return function() { 
 
     infowindow.setContent(locations[i][2]); 
 
     infowindow.open(map, marker); 
 
     } 
 

 
    })(marker, i)); 
 
    } 
 
} 
 

 
initialize();

#map-canvas { 
 
    height: 200px; 
 
}

<div id="map-canvas"></div> 
 

 
<script src="https://maps.googleapis.com/maps/api/js"></script>