Google Maps API信息窗口綁定到最后一個標記

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 assignListener = function(markerObj, infoWindowObj){
                        return function() {
                               infoWindowObj.open(map, markerObj);
                                };
                      };

然后通過該函數添加偵聽器：

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

Answer 2

嘗試我的修改。.我無法調試您的終端，但是讓我知道它是否有效...如果沒有，我想這將幫助您了解迭代循環然后用所有標記填充空數組的方式信息，詳細信息等，然后將該事件附加到地圖上。

  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