javascript - Google Maps API v3 为每个标记添加一个 InfoWindow

Question

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

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

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 部分，但不是肯定的。有什么想法吗？

Answer 1

你有 a very common closure problem在 for in 循环中:

包含在闭包中的变量共享相同的单一环境，因此当 addListener 的 click 回调被调用时，循环将运行它的过程并且info 变量将指向最后一个对象，该对象恰好是最后创建的 InfoWindow。

在这种情况下，解决此问题的一种简单方法是使用 InfoWindow 扩充您的 Marker 对象:

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 文章进行简要介绍:

• Working with Closures

另请记住，v3 API 允许 map 上有多个 InfoWindow。如果您打算当时只有一个 InfoWindow 可见，您应该使用单个 InfoWindow 对象，然后打开它并在单击标记时更改其内容( Source ).