Google 地图 API InfoWindow 绑定到最后一个标记

Question

我正在尝试向我放置在地图上的每个标记添加信息 window。信息 window 仅显示最后添加的标记。我在这里尝试了其他解决方案，但 none 一直有效。目前我正在使用以下代码执行此操作：

（有问题的代码在注释中途开始 //WORK IN PROGRESS）

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

Google 地图 API InfoWindow 绑定到最后一个标记

Google Maps API InfoWindow tied to last marker

javascript

google-maps

infowindow

google-maps-api-3