Создайте массив маркеров в одном цикле и назначьте их разное всплывающее окно

Question

Загрузите массив маркеров из строки JSON. Строка JSON содержит расположение маркера и информацию, которая должна отображаться во всплывающем окне каждого маркера.

У меня есть следующий код

function AddAllMarkers(markersJSON){ 
     var tempArray = JSON.parse(markersJSON); 

     infoWindow = new google.maps.InfoWindow(); 

     for(var i = 0; i < tempArray.Locations.length; i++){ 
      var obj = tempArray.Locations[i]; 
      var point = new google.maps.LatLng(obj.Latitude, obj.Longitude); 

      var contentString = <!--CONTENT STRING GETS SET HERE PER MARKER-->; 

      var markerTemp = new google.maps.Marker({ 
       position: point, 
       icon:obj.Icon 
      }); 

      google.maps.event.addListener(markerTemp, 'click', function() { 
       infoWindow.close(); 
       infoWindow = new google.maps.InfoWindow(); 
       infoWindow.setContent(contentString); 
       infoWindow.open(map, this); 
      }); 

      markerArray.push(markerTemp); 
     } 
    } 

Когда эта функция вызывается, я загружаю все маркера правильно, но все маркеры показывают всплывающее окно последних маркеров загруженных. Что я делаю не так? Я попытался переместить объявление infoWindow, но либо это не решает проблему, либо вызывает одновременное открытие нескольких воздушных шаров.

Как я могу это решить?

Answer 1

Причина наблюдаемого поведения заключается в том, что во время выполнения функции прослушивателя событий, которая находится во время щелчка мыши, цикл завершен. Следовательно, переменная contentString будет удерживать значение от последней итерации цикла.

В качестве обходного пути вы можете прикрепить строку содержимого к самому маркеру и получить к ней доступ, используя ссылку this в обработчике событий.

function AddAllMarkers(markersJSON){ 
    var tempArray = JSON.parse(markersJSON); 

    infoWindow = new google.maps.InfoWindow(); 

    for(var i = 0; i < tempArray.Locations.length; i++){ 
     var obj = tempArray.Locations[i]; 
     var point = new google.maps.LatLng(obj.Latitude, obj.Longitude); 

     var contentString = <!--CONTENT STRING GETS SET HERE PER MARKER--> 

     var markerTemp = new google.maps.Marker({ 
      position: point, 
      icon:obj.Icon 
     }); 

     markerTemp.contentString = contentString; 

     google.maps.event.addListener(markerTemp, 'click', function() { 
      infoWindow.close(); 
      infoWindow = new google.maps.InfoWindow(); 
      infoWindow.setContent(this.contentString); 
      infoWindow.open(map, this); 
     }); 

     markerArray.push(markerTemp); 
    } 
}