Google map API v3 - 添加多个infowindows

Question

我有一个谷歌地图javascript 的工作部分,我确实有一个问题.

现在我遇到的问题是只有一个信息显示,最后一个信息显示.我找到了另一个堆栈线程的解决方案.但我无法弄清楚原因.我对Javascript很新,所以我希望有人可以向我解释改变了什么以及如何改变.

这是工作代码:

function setMarkers(map, locations){
  for(var i = 0; i < locations.length; i++){
    var marker = locations[i];
    var latLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
    var content = locations[i][0];
    var infowindow = new google.maps.InfoWindow();

    marker = new google.maps.Marker({
      position:latLng,
      map: map
    });

    google.maps.event.addListener(marker, 'click', function(content){
      return function(){
        infowindow.setContent(content);
        infowindow.open(map, this);
      }
    }(content));
  }
}

这是原始的破解代码(我只会粘贴更改的代码):

 google.maps.event.addListener(marker, 'click', function(){
      infowindow.setContent(content);
      infowindow.open(map, marker);
    });

现在,如果你这么善良,我想知道的是:

1. 返回fn服务的功能是什么,以及

2. 什么是最后添加(content),addListener (}(content));)因为据我所知,内容已经在setContent属性中设置.

谢谢!

Answer 1

不要循环你infowindow......
你只需要一个实例中的infowindow 对象.
将它移到循环外部,同样适用于您的功能.
在循环内部只是分配它相对于被点击的内容marker

const locations = [
  {lat: 45.840196, lng: 15.964331, name: "Zagreb"},
  {lat: 43.514851, lng: 16.449083, name: "Split"},
  {lat: 42.645725, lng: 18.094058, name: "Dubrovnik"},
];

function initGoogleMap(){

  const infowindow = new google.maps.InfoWindow(); // Only one InfoWindow
  const map = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 6,
      center: new google.maps.LatLng(45, 15)
  });
  
  function placeMarker( loc ) {
    const marker = new google.maps.Marker({
      position : new google.maps.LatLng( loc.lat, loc.lng ),
      map : map
    });
    google.maps.event.addListener(marker, 'click', function(){
        infowindow.close(); // Close previously opened infowindow
        infowindow.setContent(`<div id="infowindow">${loc.name}</div>`);
        infowindow.open(map, marker);
    });
  }
  
  // ITERATE ALL LOCATIONS. Pass every location to placeMarker
  locations.forEach( placeMarker );
  
}

google.maps.event.addDomListener(window, 'load', initGoogleMap);

html, body, #map-canvas { height: 100%; margin: 0px; }
#infowindow{ padding: 10px; }

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="map-canvas"></div>