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 closures。

谷歌地图addListener仅适用于最后一个标记

1 个答案: