使用infowindows（Google Maps API）添加多个标记 [英] Adding multiple markers with infowindows (Google Maps API)

问题描述

我正在使用以下代码在Google Map上使用其API来放置多个标记。

我遇到的问题是多个infowindows无法正常工作（只显示最后一个）。

在SO上有很多像我这样的问题。实际上就是这样一个问题： - ）

只是一个例子：

$ b $绑定多个infowindows对多个标记在google地图和faili上> b

我的问题的解决方案很简单：只需将click监听器放在一个（匿名）函数中即可。

然而，我没有理解是为什么我的解决方案无法正常工作（将数组中的标记和infowindows保存在数组中而不是一个变量）。

  var markers = []; 
 var infowindows = []; 
 
 //添加商店或商场
（data.markers中的var键）{
 if（data.markers.hasOwnProperty（key））{
 infowindows [ key] = new google.maps.InfoWindow（{
 content：data.markers [key] .infowindow 
}）; 
 
 markers [key] = new google.maps.Marker（{
 position：new google.maps.LatLng（data.markers [key] .location.lat，data.markers [key ] .location.lng），
 map：map，
 flat：true，
 title：data.markers [key] .name，
 draggable：false 
} ）; 
 var iconFile ='http://maps.google.com/mapfiles/ms/icons/'+marker_color+'-dot.png'; 
标记[key] .setIcon（iconFile）; 
 
 google.maps.event.addListener（markers [key]，'click'，function（）{
 infowindows [key] .open（map，markers [key]）; 
}）; 
 
 
 $ / code $ / pre 
 $ b $所以...我不会得到什么解决方案如何使用一些函数来封装侦听器（虽然它应该工作，还没有测试过，但会），但我想知道如果我添加标记和infowindows而不是数组。
解决方案
 Javascript有一个名为closures的语言结构。闭包是函数（如上面声明的函数（）{}，以处理单击侦听器），它捕获对外部变量的引用。
 
 
 
有大量资源解释他们比我可以做的更好，我建议你参考一下，但这里是我的最佳尝试： 
 
 
在这里： 
 
 
  google.maps.event.addListener（markers [key]，'click'，function（）{
 infowindows [key] .open（map，markers [key] ）; 
}）; 
  
由于key已经被定义为一个外部变量，函数将捕获对该变量的引用。所以你期望的地方：
 
 
  infowindows [helloworld] 
  
 Javascript会将其解释为： 
 
 
  infowindows [引用键] 
  
当您点击一个标记时，它会查找引用键关键是价值。因为这可能不会发生，直到你的循环完成，键将等于你的data.markers对象的最后一个键是什么。它将等于您添加的每个点击监听器的值。
 
 
 
正如您所指出的，解决方案是将其包含在一个匿名函数中以使Javascript在点击侦听器添加时评估key的值。
  google.maps.event.addListener（标记[key]，'click'，function（innerKey）{
 return function（）{
 infowindows [innerKey] .open（map，markers [innerKey]）; 
} 
 }（键））; 
  
 
I'm currently using the following code the place multiple markers on a Google Map using their API.

The problem I'm having is with multiple infowindows not working (only showing the last one).

There are loads of questions like mine here on SO. Actually make that a shitload of questions :-)

Just an example: Trying to bind multiple InfoWindows to multiple Markers on a Google Map and failing

The solution to my problem is kinda easy: just enclose the click listener to a (anonymous) function.

However what I don't understand is why my solution isn't working (saving the markers and infowindows in arrays instead of just one variable).
    var markers = [];
    var infowindows = [];

    // add shops or malls
    for (var key in data.markers) {
      if (data.markers.hasOwnProperty(key)) {
        infowindows[key] = new google.maps.InfoWindow({
            content: data.markers[key].infowindow
        });

        markers[key] = new google.maps.Marker({
                position: new google.maps.LatLng(data.markers[key].location.lat, data.markers[key].location.lng),
                map: map,
                flat: true,
                title: data.markers[key].name,
                draggable: false
        });
        var iconFile = 'http://maps.google.com/mapfiles/ms/icons/'+marker_color+'-dot.png';
        markers[key].setIcon(iconFile);

        google.maps.event.addListener(markers[key], 'click', function() {
          infowindows[key].open(map, markers[key]);
        });
      }
    }
So... I don't what to get the solution how to get it working with some function to enclose the listener (although it should work, haven't tested it yet but will), but I want to know the reason why it wouldn't work if I add the markers and infowindows to arrays instead.
解决方案
Javascript has a language structure called "closures". Closures are functions (such as the function() {} you declare above to deal with click listener) which capture references to external variables.

There are plenty of resources which explain them better than I can, which I suggest you consult, but here's my best attempt:

In this block here:
    google.maps.event.addListener(markers[key], 'click', function() {
      infowindows[key].open(map, markers[key]);
    });
Because "key" is already defined as an external variable, the function will capture a reference to that variable. So where you expect:
infowindows["helloworld"]
Javascript will instead interpret this as:
infowindows[reference to key]
When you click on a marker, it looks up "reference to key" to see what the current value of key is. Because this probably won't happen until your loop has finished, key will be equal to whatever the last key in your data.markers object is. And it will be equal to that value for EVERY click listener you added.

The solution, as you point out, is to wrap this in an anonymous function to get Javascript to evaluate the value of "key" at the time that the click listener is added.
  google.maps.event.addListener(markers[key], 'click', function(innerKey) {
      return function() {
          infowindows[innerKey].open(map, markers[innerKey]);
      }
    }(key));


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