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