Meteor - Google Maps InfoWindow 事件未触发

Question

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

目标： 是将标记映射到画布上，然后单击以显示 infoWindows。我在触发谷歌地图事件以显示窗口时遇到问题。

我的代码：

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

});

Answer 1

您正在从事件处理程序返回一个函数，而不仅仅是处理事件，原因尚不清楚。试试这个：

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