Google Maps API v3 向每个标记添加信息窗口

注意：我使用的是 Google Maps API v3

我正在尝试为我在地图上放置的每个标记添加一个信息窗口。目前我正在使用以下代码执行此操作：

for (var i in tracks[racer_id].data.points) {
    values = tracks[racer_id].data.points[i];                
    point = new google.maps.LatLng(values.lat, values.lng);
    if (values.qst) {
        var marker = new google.maps.Marker({map: map, position: point, clickable: true});
        tracks[racer_id].markers[i] = marker;
        var info = new google.maps.InfoWindow({
            content: '<b>Speed:</b> ' + values.inst + ' knots'
        });
        tracks[racer_id].info[i] = info;
        google.maps.event.addListener(marker, 'click', function() {
            info.open(map, marker);
        });
    }
    track_coordinates.push(point);
    bd.extend(point);
}

问题是当我单击一个标记时，它只显示最后添加的标记的信息窗口。另外，为了清楚起见，信息窗口出现在最后一个标记旁边，而不是单击的标记旁边。我想我的问题出在 addListener 部分，但我并不积极。有任何想法吗？

你正拥有的一个非常常见的闭包问题 https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Working_with_Closures#Creating_closures_in_loops.3a_A_common_mistake in the for in loop:

封闭在闭包中的变量共享同一个环境，所以到了click回调来自addListener被调用时，循环将按其顺序运行，并且info变量将指向最后一个对象，这恰好是最后一个InfoWindow创建的。

在这种情况下，解决此问题的一种简单方法是增强您的Marker对象与InfoWindow:

var marker = new google.maps.Marker({map: map, position: point, clickable: true});

marker.info = new google.maps.InfoWindow({
  content: '<b>Speed:</b> ' + values.inst + ' knots'
});

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

如果您不熟悉闭包的工作原理，这可能是一个相当棘手的话题。您可以查看以下 Mozilla 文章以获取简要介绍：

• 使用闭包 https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Working_with_Closures

另请记住，v3 API 允许多个InfoWindow在地图上。如果您只想拥有一个InfoWindow当时可见，您应该使用单个InfoWindow对象，然后打开它并在单击标记时更改其内容 (Source http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows).