谷歌地圖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 ，以便在單擊事件中訪問它時，它使用該變量的最新版本，這是您添加的最后一個標記。

因此，當您將其放入函數時，該變量位於單獨的命名空間中，因此不會被覆蓋。 換句話說，這應該工作：

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

您應該使用此而不是標記，因為標記將保留最后放置的標記的值。

Answer 3

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',
       content: 'test string'
    });
    google.maps.event.addListener(marker, 'click', function() {
        new google.maps.InfoWindow({
            content: this.content
        }).open(map, this);
    });
}

Answer 4

作為7年前無法使用的新選項：

所有現代瀏覽器（所有支持ECMAScript 6的瀏覽器）都支持使用let語句定義的塊作用域變量。 let初始化給定范圍內的變量，例如循環內部，而var定義全局或函數級別的變量。 在你的情況下，用let交換var將確保每個標記被正確初始化為一個新變量：

for (var i = 0; i < 8; i++) {
    let 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',
    });
    let infowindow = new google.maps.InfoWindow({
        content: 'test string'
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}

Answer 5

試試這個：

        // Create a marker for each place.
         marker = new google.maps.Marker({
             map: map,
             icon: icon,
             title: place.name,
             animation: google.maps.Animation.DROP,
             position: place.geometry.location
         });
         var infowindow = new google.maps.InfoWindow({
         content:'<div><strong>' + place.name + '</strong><br>' +
            'Place ID: ' + place.place_id + '<br>' +
            place.formatted_address + '</div>'
            });
        marker.addListener('click', function() {
        infowindow.open(map, this);
        });

謝謝