Google map API v3 - 添加多个infowindows [英] Google map API v3 - Add multiple infowindows

问题描述

我有一个google maps的正常工作部分，我确实遇到了问题。

现在我遇到的问题是只有一个infowindow出现了，最后一个。我在另一个堆栈线程上发现了一个解决方案。但我真的不知道为什么。我相当新的Javascript，所以我希望有人可以向我解释什么改变和如何。

这是工作代码：

 函数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））; 
 
 
 $ / code $ / pre 
 
 
原始破码是（我会只粘贴更改后的内容）：
  google.maps.event.addListener（marker，'click'，function（）{
 infowindow.setContent（content）; 
 infowindow.open（map，marker）; 
}）; 
  
现在我想知道您是否真的如此友善：
 
 
 
返回函数的功能是什么，以及 
 
 
在 addListener  （}（content））的末尾添加了（content） ）>因为据我所见，内容已经设置在 setContent 属性中。
 
 
 
谢谢！
解决方案
您的 infowindow  ... 
 
您只需要一个实例的 infowindow   object 。
 
将其移至外部的循环中，与您的函数相同。
 
在循环内部赋值它的内容相对于点击标记 
 
 
 
 
 
 
  var lo函数initGoogleMap（）{var infowindow = new google.maps.InfoWindow（）{[Split，43.5148515，16.4490835]，[Zagreb，45.840196,15.9643316]，[Dubrovnik，42.6457256，18.094058] ; / * SINGLE * / var map = new google.maps.Map（document.getElementById（'map-canvas'），{zoom：4，center：new google.maps.LatLng（45，15）}）;函数placeMarker（loc）{var latLng = new google.maps.LatLng（loc [1]，loc [2]）; var marker = new google.maps.Marker（{position：latLng，map：map}）; google.maps.event.addListener（marker，'click'，function（）{infowindow.close（）; //关闭先前打开的infowindow infowindow.setContent（< div id ='infowindow'>+ loc [0 ] +< / div>）; infowindow.open（map，marker）;}）; } // ITERATE ALL LOCATIONS //不要在循环中创建函数//因此引用先前创建的函数//并将迭代位置作为参数值传递：for（var i = 0; i< locations.length; i ++ ）{placeMarker（locations [i]）; }} google.maps.event.addDomListener（window，'load'，initGoogleMap）;  

  html，body，＃map-canvas {height：100％; margin：0px;  
 
 
 
 < script src =https://maps.googleapis.com/maps/api/js?v=3.exp>< / script>< div id =map-canvas>< / div>  

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

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.

Here is the working code:

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. what function does the return fn serve, and

2. 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.

Thank-you!

解决方案

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 just assign it's content relative to the clicked marker

var locations = [
  ["Split",     43.5148515, 16.4490835],
  ["Zagreb",    45.840196,  15.9643316],
  ["Dubrovnik", 42.6457256, 18.094058]
];

function initGoogleMap(){

  var infowindow = new google.maps.InfoWindow(); /* SINGLE */
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 4,
      center: new google.maps.LatLng(45, 15)
  });
  
  function placeMarker( loc ) {
    var latLng = new google.maps.LatLng( loc[1], loc[2]);
    var marker = new google.maps.Marker({
      position : latLng,
      map      : map
    });
    google.maps.event.addListener(marker, 'click', function(){
        infowindow.close(); // Close previously opened infowindow
        infowindow.setContent( "<div id='infowindow'>"+ loc[0] +"</div>");
        infowindow.open(map, marker);
    });
  }
  
  // ITERATE ALL LOCATIONS
  // Don't create functions inside for loops
  // therefore refer to a previously created function
  // and pass your iterating location as argument value:
  for(var i=0; i<locations.length; i++) {
    placeMarker( locations[i] );
  } 
  
}
google.maps.event.addDomListener(window, 'load', initGoogleMap);

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

#infowindow{
  padding: 10px;
}

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

这篇关于Google map API v3 - 添加多个infowindows的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！