在循環中聲明谷歌地圖標記

Question

我有一個谷歌地圖標記事件偵聽器的怪異問題。基本上我想在一個循環中聲明一堆標記，並讓每個標記都有一個關聯的infowindow。相關的代碼是：

var markers=[]; 
var contents = []; 
var infowindows = []; 


for (i = 0; i < 10; i++) { 

    markers[i] = new google.maps.Marker({ 
     position: new google.maps.LatLng(40+Math.random()*5, 4+Math.random()*5), 
     map: map, 
     title: 'samplemarker' 
    }); 

    contents[i] = '<div class="popup_container">' + 
    '</div>'; 


    infowindows[i] = new google.maps.InfoWindow({ 
    content: contents[i], 
    maxWidth: 300 
    }); 

    google.maps.event.addListener(markers[i], 'click', function() { 
      infowindows[i].open(map,markers[i]); 
      map.panTo(markers[i].getPosition()); 
    }); 
} 

的標記正確創建，以及信息窗口太多，因爲如果我這樣做手工infowindows[i].open(map,markers[i]);它們正確地打開。然而，聽衆不起作用。

Even weirder：我還有另外一個標記，marker_1在for循環之外聲明，完全一樣。如果我寫：

google.maps.event.addListener(marker_1, 'click', function() { 
     infowindows[0].open(map,markers[0]); 
     map.panTo(markers[0].getPosition()); 
}); 

當單擊marker_1時，infowindow 0被打開並且地圖將被移動到標記0。但是，在寫入時，在完全相同的位置上，除marker_1替換爲marker_ [0]以外的其他行，標記0上的單擊完全沒有效果。

感謝您的任何幫助和抱歉，如果它是愚蠢的！

Answer 1

在你的onclick處理程序中，你還沒有那個i值，在你的情況下，它總是會在循環結束後取最後一個值i，即10，而標記[10]不存在你只有10個標記。

爲了使它工作，你可以例如添加額外的屬性來排列你的標記，這將存儲標記索引，並用它你的點擊數處理

var markers=[]; 
var contents = []; 
var infowindows = []; 


for (i = 0; i < 10; i++) { 

    markers[i] = new google.maps.Marker({ 
     position: new google.maps.LatLng(40+Math.random()*5, 4+Math.random()*5), 
     map: map, 
     title: 'samplemarker' 
    }); 

    markers[i].index = i; //add index property 
    contents[i] = '<div class="popup_container"></div>'; 


    infowindows[i] = new google.maps.InfoWindow({ 
     content: contents[i], 
     maxWidth: 300 
    }); 

    google.maps.event.addListener(markers[i], 'click', function() { 
     console.log(this.index); // this will give correct index 
     console.log(i); //this will always give 10 for you 
     infowindows[this.index].open(map,markers[this.index]); 
     map.panTo(markers[this.index].getPosition()); 
    }); 
} 

see corrected example