Google Maps API InfoWindow綁定到最後一個標記

Question

我正在嘗試向放置在地圖上的每個標記添加一個信息窗口。信息窗口僅顯示最後添加的標記。我在這裏嘗試了其他解決方案，但沒有一個工作。目前，我用下面的代碼這樣做：

（違規代碼的註釋//作業中，開始一半）

function placeMarker(data, map){ 
 
var lati, lngi, title, details; 
 
var image = 'image.png'; 
 

 
    for(i=0; i < data.length; i++){ 
 
    console.log(data[i].eventLocation + " OF TYPE " + data[i].eventType); 
 
    if(data[i].eventName != ""){ 
 
     title = data[i].eventName; 
 
    } 
 
    if(data[i].eventDetails != ""){ 
 
     details = data[i].eventDetails; 
 
    } 
 

 
     if(data[i].eventLocation == "Location 1"){ 
 
     lati = -29.651409; 
 
     lngi = 82.342909; 
 
     } 
 
     else if(data[i].eventLocation == "Location 2"){ 
 
     lati = -29.637712; 
 
     lngi = 82.368024; 
 
     } 
 
     else if(data[i].eventLocation == "Location 3"){ 
 
     lati = -29.650533; 
 
     lngi = 82.342684; 
 
     } 
 
     else{ 
 
     lati = -29.645793; 
 
     lngi = 82.347717; 
 
     console.log(data[i].eventLocation + " not found"); 
 
     } 
 
     // WORK IN PROGRESS 
 
     var infowindow = new google.maps.InfoWindow({ 
 
      content: details 
 
     }); 
 

 
     newMarker = new google.maps.Marker({ 
 
     position: {lat: lati, lng: lngi}, 
 
     title : title, 
 
     map: map, 
 
     icon: image, 
 
     details: details 
 
     }); 
 

 
     newMarker.addListener('click', function() { //needs some work to connect to each marker instead of last one placed 
 
      infowindow.open(map, newMarker); 
 
     }); 
 
    } 
 
} 
 

 
function initMap(data) { 
 
    var uluru = {lat: -29.643220, lng: 82.350427}; 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 14, 
 
    center: uluru 
 
    }); 
 
// Marker Images 
 
    var centerMarker = new google.maps.Marker({ 
 
    position: {lat: -29.643894, lng: 82.354748}, 
 
    map: map, 
 
    icon: image3 
 
    }); 
 
    placeMarker(data, map); 
 
}

試圖找到一個解決方案讓我顯示每個標記上輸入的最後信息，但不顯示相應標記的正確信息。 我改變了這本：

newMarker.addListener('click', function() { //needs some work to connect to each marker instead of last one placed 
 
      infowindow.open(map, newMarker); 
 
     });

google.maps.event.addListener(newMarker, 'click', function() { //needs some work to connect to each marker instead of last one placed 
 
      infowindow.open(map, this); 
 
     });

Answer 1

盡我修改。我不能調試結束，但讓我知道是否可行？如果沒有，我想這會幫助你看到的的方式，我用迭代循環，然後填寫空數組的所有標記信息，詳細信息等，並附上事件地圖..

var infoWindow = new google.maps.InfoWindow; 
    // open info window 
    var onMarkerClick = function() { 
    var marker = this; 
    infoWindow.setContent(marker.details); 
    infoWindow.open(map, marker); 
    mkmap.lastmarkeropened = marker; 
    }; 
    // close the info window 
    google.maps.event.addListener(map, 'click', function() { 
    infoWindow.close(); 
    }); 

    var marker = [] ; 
    // loop start 
    for(i=0; i < data.length; i++){ 
    console.log(data[i].eventLocation + " OF TYPE " + data[i].eventType); 
    if(data[i].eventName != ""){ 
     title = data[i].eventName; 
    } 
    if(data[i].eventDetails != ""){ 
     details = data[i].eventDetails; 
    } 

     if(data[i].eventLocation == "Location 1"){ 
     lati = -29.651409; 
     lngi = 82.342909; 
     } 
     else if(data[i].eventLocation == "Location 2"){ 
     lati = -29.637712; 
     lngi = 82.368024; 
     } 
     else if(data[i].eventLocation == "Location 3"){ 
     lati = -29.650533; 
     lngi = 82.342684; 
     } 
     else{ 
     lati = -29.645793; 
     lngi = 82.347717; 
     console.log(data[i].eventLocation + " not found"); 
     } 

     marker[ i ] = new google.maps.Marker({ 
     position: {lat: lati, lng: lngi}, 
     title : title, 
     map: map, 
     icon: image, 
     details: details 
     }); 

     // attach event to open info window 
     google.maps.event.addListener(marker[ i ], 'click', onMarkerClick); 
    } // end loop 

看看這個工程..

歡呼聲，K

Answer 2

嘗試把它放在這樣，你的循環之前定義此功能：

var assignListener = function(markerObj, infoWindowObj){ 
         return function() { 
           infoWindowObj.open(map, markerObj); 
           }; 
         }; 

然後通過該功能添加監聽器：

newMarker.addListener('click', assignListener(newMarker, infowindow));