使用api v3将infowindow添加到谷歌地图上的循环标记数组 [英] Add infowindow to looped array of markers on google map using api v3

问题描述

我有一个数组，通过在js中放置自定义标记到谷歌地图上。我需要为每个标记添加一个隐藏的信息窗口，以便在单击时显示相关的信息窗口。目前我正在做以下工作：

$ p $ 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）;
}


然而，这只会创建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（地图，这）; 
}）; 
  

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

I have an array that is being looped through in js to put custom markers on a google map. I need to add a hidden info window for each marker so that when it is clicked the relevant infowindow is displayed. Currently I am doing the following:

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

However this only creates 1 info box that displays no matter which point you click.

Thanks for any help

解决方案

Check out this blog post:

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

Basically, you are overwriting each marker object with the new marker object. You need to make each marker context-specific, using this.

Your event listener should look like:

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

You may need to make more changes to ensure you are creating new objects for each iteration. Try this and let us know!

这篇关于使用api v3将infowindow添加到谷歌地图上的循环标记数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！