如何为谷歌地图v3中的每个标记创建信息窗口

How to create infowindow for each marker in google maps v3?

本文关键字：创建 信息 窗口 信息窗 谷歌地图 v3      更新时间：2023-09-26

我想用不同的值创建三个标记。在for循环中，我有以下内容:

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

我遇到的问题是，当我点击3个标记中的任何一个时，只有创建的最后一个标记的信息窗口弹出。我该怎么解决这个问题?

也许你会发现下面的例子很有用:

var cityList = [
            ['Chicago', 41.850033, -87.6500523, 1],
            ['Illinois', 40.797177,-89.406738, 2]
        ]
function addMarkers()
{
    var marker, 
    i,
    infowindow = new google.maps.InfoWindow();
    for (i = 0; i < cityList.length; i++) 
    {  
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
            map: map,
            title: cityList[i][0]
        });
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(cityList[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
}

您需要将此代码移出for循环并放入您从for循环调用的单独函数中。如果你发布更多的代码，包括循环和循环迭代的数组，我可以给出更具体的建议。

但是作为一个例子:

var places = [
    { lat:1, lng:1, name:'one one' }
    { lat:-1, lng:-1, name:'minus one one' }
];
for( var i = 0, n = places.length;  i < n;  i++ ) {
    addPlace( places[i] );
}
function addPlace( place ) {
    // here you have place.lat, place.lng, and place.name to work with
}
相关文章：