GoogleMaps addListener仅适用于最后一个标记

Question

我有下面显示的代码,在GoogleMap上显示3个标记,位置数据在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 );
            });
        }
    }
})();

原始代码不起作用的原因是marker在循环和事件侦听器中使用变量.但是marker代码中只有一个变量,在循环开始时设置.因此,当单击处理程序被触发时 - 在所有其他代码已经完成运行之后很久 - 该marker变量具有您通过循环将其设置为最后一次的值.

早期标记的事件侦听器不会以某种方式获得它们自己的marker变量副本- marker整个程序中只有一个变量.

将代码移动到函数中可以解决此问题.现在,每次调用函数的时候,你就创建一个新的marker变量(和一个新的weather为每个调用变量太).因此,函数内部的事件侦听器可以使用该marker变量进行函数的特定调用.

有关更多信息,请阅读JavaScript闭包.