谷歌地图infowindow显示错误的标记

Question

我有一段javascript代码,我在其中创建标记并将InfoWindows附加到它们,如下所示:

for (var i = 0; i < 8; i++) {
    var marker = new google.maps.Marker({
       map: map,
       position: new google.maps.LatLng(lat[i], lng[i]),
       icon: '/static/images/iconsets/gmap/iconb' + (i+1) + '.png',
    });
    var infowindow = new google.maps.InfoWindow({
        content: 'test string'
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}

但是当我点击其中一个标记时,infowindow总是只显示在一个标记上.我究竟做错了什么？

Answer 1

对你的问题有一个非常简单的解决方案,即将循环代码放入函数中.您的问题是您覆盖了变量marker,因此当在click事件中访问它时,它会使用该变量的最新版本,这是您添加的最后一个标记.

因此,当您将其放入函数时,该变量位于单独的命名空间中,因此不会被覆盖.换句话说,这应该工作:

for (var i = 0; i < 8; i++) {
    createMarker(i);
}

function createMarker(i) {
    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(lat, lng),
        icon: '/static/images/iconsets/gmap/iconb' + (i+1) + '.png',
    });
    var infowindow = new google.maps.InfoWindow({
        content: 'test string'
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}

Answer 2

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

您应该使用此而不是标记,因为标记将保留最后放置标记的值.