Google Maps API v3 为每个标记添加了一个 InfoWindow [英] Google Maps API v3 adding an InfoWindow to each marker

问题描述

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

NOTE: I'm using v3 of the Google Maps API

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

I'm trying to add an info window to each marker I put on the map. Currently I'm doing this with the following code:

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 部分，但不是积极的.有什么想法吗?

The problem is when I click on a marker it just displays the info window for the last marker added. Also just to be clear the info window appears next to the last marker not the marker clicked on. I'd imagine my problem is in the addListener portion but am not postitive. Any ideas?

推荐答案

您有 for in 循环中一个非常常见的闭包问题:

You are having a very common closure problem in the for in loop:

封闭在闭包中的变量共享同一个环境，所以当 addListener 的 click 回调被调用时，循环将运行它的进程，并且info 变量将指向最后一个对象，也就是最后一个 InfoWindow 创建的对象.

Variables enclosed in a closure share the same single environment, so by the time the click callback from the addListener is called, the loop will have run its course and the info variable will be left pointing to the last object, which happens to be the last InfoWindow created.

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

In this case, one easy way to solve this problem would be to augment your Marker object with the 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 文章以进行简要介绍:

This can be quite a tricky topic, if you are not familiar with how closures work. You may to check out the following Mozilla article for a brief introduction:

• 使用闭包

还要记住，v3 API 允许地图上有多个 InfoWindow.如果您打算当时只有一个 InfoWindow 可见，则应改为使用单个 InfoWindow 对象，然后在单击标记时打开它并更改其内容(来源).

Also keep in mind, that the v3 API allows multiple InfoWindows on the map. If you intend to have just one InfoWindow visible at the time, you should instead use a single InfoWindow object, and then open it and change its content whenever the marker is clicked (Source).

这篇关于Google Maps API v3 为每个标记添加了一个 InfoWindow的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！