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

Question

我想创建三个具有不同值的标记。在 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 个标记中的任何一个时，只会弹出最后一个创建标记的信息窗口。我该如何解决这个问题？

Answer 1

也许您会发现以下示例很有用：

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

Answer 2

您需要将此代码移出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
}