流星 - Google 地图信息窗口事件未触发

Question

使用 Meteorjs 和 dburles google Meteor 地图包。

目标：就是把标记映射到canvas，然后点击显示信息窗口。我在触发 google 地图事件以使 window 显示时遇到问题。

我的代码：

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

此外，我还没有运行你的代码，但我认为你运行会遇到你构建此代码的方式的问题，因为 [=13] 的值=] 在实际触发处理程序时不会按预期进行（因为循环随后会继续）。考虑改用 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);
      });        
  });

流星 - Google 地图信息窗口事件未触发

Meteor - Google Maps InfoWindow Event Not Firing

javascript

google-maps

infowindow

meteor