使用api v3在google地图上添加infowindow到循环标记数组

Question

我有一个在js中循环的数组,用于在谷歌地图上放置自定义标记.我需要为每个标记添加一个隐藏的信息窗口,以便在单击时显示相关的信息窗口.目前我正在做以下事情:

for(var i=0; i<google_map_item.length; i++)
    {
        latlon = new google.maps.LatLng(google_map_item[i].lat, google_map_item[i].lon)
        bounds.extend(latlon);
        var iconcolor = google_map_item[i].iconColor;
        marker = new google.maps.Marker({
            map: map,
            position: latlon,
            icon: "https://chart.googleapis.com/chart?chst=d_map_pin_letter_withshadow&chld=" + (i + 1) + "|"+iconcolor+"|000000",
            type: 'flat',
            icon_color: '#ff0000', 
            label_color: '#ffffff', 
            width: '20', 
            height: '20', 
            label_size: '11',
                            clickable: true
        });

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

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

        map.fitBounds(bounds);
    }

但是,这只会创建一个信息框,无论您点击哪一点,都会显示该信息框.

谢谢你的帮助

Answer 1

看看这篇博文:

http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/

基本上,您使用新标记对象覆盖每个标记对象.您需要使用,使每个标记特定于上下文this.

您的事件监听器应如下所示:

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

您可能需要进行更多更改以确保为每次迭代创建新对象.试试这个,让我们知道!