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

Meteor - Google Maps InfoWindow Event Not Firing

本文关键字：事件 窗口 信息窗 谷歌地图 信息 流星      更新时间：2023-09-26

使用 Meteorjs 和 dburles Google Map Package for Meteor。

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

我的代码：

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

}）;

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

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

更新

另一个问题是你试图把它添加到谷歌地图对象，而不是实例本身。 它应该是：

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);
      });        
  });
相关文章：