流星 - Google地图信息窗口事件不会触发 [英] Meteor - Google Maps InfoWindow Event Not Firing

问题描述

为流星使用Meteorjs和dburles谷歌地图包。

目标：
是在画布上绘制标记，然后点击以显示infoWindows。我正在解决Google地图事件，以便窗口显示。

我的代码：

  Template.myMap.helpers（{ b $ b mapOptions：function（）{
 var locations = [
 ['Kroger'，34.069201，-84.231052，5]，
 ['Fresh Produce'，34.069802，-84.234164，4 ]，
 ['Starbucks'，34.069003，-84.236323，3]，
 ['Mall of Georgia'，34.069204，-84.232016,2]，
 ['Avalanche'，34.069705， - 84.238207，1] 
] 
 
 //确保maps API已经加载
 if（GoogleMaps.loaded（））{
 //我们可以使用`准备好的回调函数，在地图准备就绪后与地图API交互。
 GoogleMaps.ready（'myMap'，function（map）{
 var infowindow = new google.maps.InfoWindow（），
 marker，i; 
 
 for（i = 0; i< locations.length; i ++）{
 marker = new google.maps.Marker（{
 position：新的google.maps.LatLng（位置[i] [1]，位置[i] [2]），
 map：map.instance 
}）; 
 
 google.maps.event.addListener（marker，'click'，function（）{
 return function（）{
 infowindow.setContent（locations [i] [0]）; 
 infowindow.open（map，marker）; 
} 
}）; 
} 
}）; 
 return {
 center：new google.maps.LatLng（34.069705，-84.238），
 zoom：16 
}; 
} 
} 
  

}）;

解决方案

您从事件处理函数返回一个函数，而不是仅仅处理事件，原因不明。试试这个：

  google.maps.event.addListener（marker，'click'，function（）{
 infowindow .setContent（locations [i] [0]）; 
 infowindow.open（map，marker）; 
}）; 
  

更新

另一个问题是，您正尝试将其添加到GoogleMaps地图对象中，而不是实例本身。它应该是：

  infowindow.open（map.instance，marker）; 
  

另外，我还没有运行您的代码，但我认为您会遇到问题用你构造它的方式，因为当处理程序被实际触发时（因为循环将在后续继续）， i 的值不会如预期的那样。考虑使用 forEach 代替（下面通过下划线），以便每个处理程序都在其自己的闭包中声明。

  _.forEach（locations，function（location）{
 var marker = new google.maps.Marker（{
 position：new google.maps.LatLng（location [1] ，location [2]），
 map：map.instance 
}）; 
 
 google.maps.event.addListener（marker，'click'，function（）{
 infowindow.setContent（location [0]）; 
 console.log（map，marker，infowindow）; 
 infowindow.open（map.instance，marker）; 
}）; 
}）; 
  

Using Meteorjs and dburles google map package for Meteor.

The Goal: Is to have the markers map out on the canvas, and then onclick to reveal the infoWindows. I am having an issue firing the google map event in order for the window to reveal.

My Code:

 Template.myMap.helpers({
   mapOptions: function() {
    var locations = [
       ['Kroger', 34.069201, -84.231052, 5],
       ['Fresh Produce', 34.069802, -84.234164, 4],
       ['Starbucks', 34.069003, -84.236323, 3],
       ['Mall of Georgia', 34.069204, -84.232016, 2],
       ['Avalanche', 34.069705, -84.238207, 1]
      ]

// Make sure the maps API has loaded
if (GoogleMaps.loaded()) {
  // We can use the `ready` callback to interact with the map API once the map is ready.
  GoogleMaps.ready('myMap', function(map) {
    var infowindow = new google.maps.InfoWindow(),
        marker, i;

    for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map.instance
      });

      google.maps.event.addListener(marker, 'click', function() {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      });
    }
  });
  return {
    center: new google.maps.LatLng(34.069705, -84.238),
    zoom: 16
  };
}
}

});

解决方案

You're returning a function from the event handler rather than just handling the event, for reasons that aren't clear. Try this:

google.maps.event.addListener(marker, 'click', function() {
  infowindow.setContent(locations[i][0]);
  infowindow.open(map, marker);
});

UPDATE

The other problem is that you're trying to add it to the GoogleMaps map object, not the instance itself. It should be:

infowindow.open(map.instance, marker);

Also, I haven't run your code, but I think you're going to run into problems with the way you've structured this, as the value of i will not be as intended when the handler is actually fired (because the loop will have subsequently continued). Consider using forEach instead (below via underscore) so that each handler is declared in its own closure.

  _.forEach(locations, function(location) {
      var marker = new google.maps.Marker({
            position: new google.maps.LatLng(location[1], location[2]),
            map: map.instance
          }); 

      google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent(location[0]);
          console.log(map, marker, infowindow);
          infowindow.open(map.instance, marker);
      });        
  });

这篇关于流星 - Google地图信息窗口事件不会触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！