Google Maps API v3将InfoWindow添加到每个标记 [英] Google Maps API v3 adding an InfoWindow to each marker

问题描述

注意：我使用的是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}）; 
曲目[racer_id] .markers [i] = marker; 
 var info = new google.maps.InfoWindow（{
 content：'< b> Speed：< / b>'+ values.inst +'knots'
}）; 
曲目[racer_id] .info [i] = info; 
 google.maps.event.addListener（marker，'click'，function（）{
 info.open（map，marker）; 
}）; 
} 
 track_coordinates.push（point）; 
 bd.extend（point）; 
} 
  

问题是当我点击一个标记时它只显示信息窗口最后添加的标记。也只是要清除信息窗口出现在最后一个标记旁边，而不是点击标记。我会想象我的问题是在addListener部分，但不是联系。任何想法？

在 for 循环中
中的一个非常常见的关闭问题 ：

闭包中包含的变量共享同一个单一环境，因此，当从 addListener 点击回调时c $ c>被调用，循环将运行，并且 info 变量将被指向最后一个对象，这恰好是最后一个 InfoWindow 创建。

在这种情况下，解决此问题的一个简单方法是增加标记对象与 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文章，以进行简要介绍：



• 使用闭包

请记住， v3 API允许在地图上显示多个 InfoWindow 。如果您打算当时只有一个 InfoWindow 可见，则应该使用一个 InfoWindow 对象，然后打开它并在点击标记时更改其内容（源代码） a>）。

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);
}

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?

解决方案

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

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.

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);
});

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:

• Working with Closures

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屋！