Google Maps API v3将InfoWindow添加到每个标记

本文介绍了Google Maps API v3将InfoWindow添加到每个标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

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

闭包中包含的变量共享同一个单一环境，因此，当从 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添加到每个标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！