GoogleMaps addListener работает только для последнего маркера

Question

У меня есть код, показанный ниже, который отображает 3 маркера в GoogleMap, данные местоположений находятся в объекте JSON.

Маркеры указаны правильно, но Listener (addListener) работает только с последним маркером, а не с первыми двумя маркерами. Что не так с моим кодом?

Я рассмотрел множество примеров, просто не вижу его. :(Спасибо за любую помощь!

(function() { 
window.onload = function() { 

// Creating a map 
var options = { 
    zoom: 3, 
    center: new google.maps.LatLng(37.09, -95.71),  
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
var map = new google.maps.Map(document.getElementById('map'), options); 

// Creating a JSON object with weather data 
var weatherData = {'weather': [ 
    { 
    'lat': 40.756054, 
    'lng': -73.986951 
    }, 
    { 
    'lat': 47.620973, 
    'lng': -122.347276 
    }, 
    { 
    'lat': 37.775206, 
    'lng': -122.419209 
    } 
]}; 

var infoWindow = new google.maps.InfoWindow({ 
    content: 'Hello world' 
}); 

// Looping through the weather array in weatherData 
for (var i = 0; i < weatherData.weather.length; i++) { 

    // creating a variable that will hold the current weather object 
    var weather = weatherData.weather[i]; 

    // Creating marker 
    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(weather.lat, weather.lng), 
     map: map 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
     infoWindow.open(map, marker); 
    }); 


} 

    } 
})(); 

Answer 1

Короткий ответ, что вам нужно, чтобы переместить код, который создает маркер и добавляет прослушиватель событий в свою собственную функцию. Затем в цикле, вы вызываете эту функцию для каждого маркер:

(function() { 
    window.onload = function() { 

     // Creating a map 
     var options = { 
      zoom: 3, 
      center: new google.maps.LatLng(37.09, -95.71), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById('map'), options); 

     // Creating an object with weather data 
     var weatherData = { 
      weather: [ 
       { lat: 40.756054, lng: -73.986951 }, 
       { lat: 47.620973, lng: -122.347276 }, 
       { lat: 37.775206, lng: -122.419209 } 
      ] 
     }; 

     var infoWindow = new google.maps.InfoWindow({ 
      content: 'Hello world' 
     }); 

     // Looping through the weather array in weatherData 
     for(var i = 0; i < weatherData.weather.length; i++) { 
      addWeatherMarker(weatherData.weather[i]); 
     } 

     function addWeatherMarker(weather) { 
      // Creating marker 
      var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(weather.lat, weather.lng), 
       map: map 
      }); 

      google.maps.event.addListener(marker, 'click', function() { 
       infoWindow.open(map, marker); 
      }); 
     } 
    } 
})(); 

причина исходный код не работает является использование переменной в цикле и слушателя событий Но есть только один переменной в коде, установить в начале. цикл, поэтому, когда обработчик щелчка запускается - долго после того, как весь другой код уже завершен, - переменная имеет значение, которое вы установили в последний раз через цикл.

Слушатели событий для ранних маркеров не получают каких-либо собственных копий переменной - во всей программе есть только одна переменная .

Перемещение кода в функцию исправляет это. Теперь, каждый раз, когда вы вызываете функцию, вы вызываете do, чтобы создать новую переменную (и новую переменную weather) для каждого вызова. Таким образом, прослушиватель событий внутри функции получает переменную для этого конкретного вызова функции.

Для получения дополнительной информации ознакомьтесь с JavaScript closures.