javascript - Google map API v3 - 添加多个信息窗口

Question

我有 google maps 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. return fn有什么作用，

2. 在 addListener (}(content));) 末尾添加的 (content) 做了什么，因为 as据我所知，内容已在 setContent 属性中设置。

谢谢!

Answer 1

不要循环你的infowindow...
您只需要 infowindow object 的一个实例。
将它移到循环的外部，对于您的函数也是如此。
在循环内，将其内容作为相对分配给被点击的标记

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>