谷歌地图 API v3 - 添加多个信息窗口 [英] Google map API v3 - Add multiple infowindows

问题描述

我有一个工作部分的谷歌地图javascript，我确实遇到了问题.

I've got a working section of google maps javascript, I did have a problem.

现在我遇到的问题是只显示了一个信息窗口，最后一个.我在另一个堆栈线程上找到了一个解决方案.但我真的不明白为什么.我对 Javascript 还很陌生，所以我希望有人能向我解释发生了什么变化以及如何变化.

Now the issue I had was that only one infowindow was showing up, the last. I found a solution on another stack thread that worked out. But I couldn't really work out why. I'm fairly new to Javascript so I was hoping someone could explain to me what changed and how.

这是工作代码:

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

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

Here is the original broken code was (I'll paste only that which changed):

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

现在我想知道你是否会这么友善:

Now what I'd like to know if you'd be so kind, is:

1. 返回 fn 的作用是什么，以及

1. what function does the return fn serve, and

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

what does the added (content) at the end of addListener (}(content));) do since as far as I can see the content has already been set within the setContent property.

谢谢！

推荐答案

不要循环你的 infowindow...
您只需要infowindow 对象的一个实例.
将其移到循环之外，对于您的函数也是如此.
在循环内部，将其内容作为 relative 分配给点击的 marker

Don't loop your infowindow...
You need only one instance of the infowindow object.
Move it outside of the loop, same for your functions.
Inside the loop assign its content as relative to the clicked 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>

这篇关于谷歌地图 API v3 - 添加多个信息窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！