Question

我正在使用meteor-google-map。我正在尝试像google.map.event.trigger(GoogleMaps.maps.exampleMap , resize)那样调整地图的大小，但问题是它不起作用。我的地图隐藏在标签中，因此每当我打开该标签时，地图都不会显示。我尝试使用resize函数，但也没有做任何事情。任何人都可以告诉我它为什么没有显示

已添加代码

映射HTML

<body>
<div class="row">
<ul>
  <li><a href="#what">What</a></li>
  <li><a href="#where">Where</a></li>
</ul>
</div>

<div id="what" class="col s12">
</div>
 <div id="where" class="col s12">
  <div class="map-container">
    {{> googleMap name="exampleMap" options=exampleMapOptions}}
  </div>
 </div>
</body>

map.js

Template.body.helpers({
  exampleMapOptions: function() {
    // Make sure the maps API has loaded
    if (GoogleMaps.loaded()) {
      // Map initialization options
      return {
        center: new google.maps.LatLng(-37.8136, 144.9631),
        zoom: 8
      };
    }
  }
});

Template.body.onCreated(function() {
  // We can use the `ready` callback to interact with the map API once the map is ready.
  GoogleMaps.ready('exampleMap', function(map) {
    // Add a marker to the map once it's ready
    var marker = new google.maps.Marker({
      position: map.options.center,
      map: map.instance
    });
  });
});
Template.body.event({
   'click .where a':function(){
    debugger;
    google.maps.event.trigger(GoogleMaps.maps.exampleMap , 'resize');
  }
});

当页面加载打开的选项卡时。当用户点击li里面的链接时，选项卡打开的位置。第一次打开时我无法看到地图，但在调整浏览器大小后，地图会加载。我试图自己触发调整大小事件但是没有用到

Answer 1

首先，您的代码正在使用google.map.event。但是，Google地图版名称空间为maps而不是map。即它应该是google.maps.event

其次，当您致电trigger时，您需要将该事件的名称作为字符串传递，即google.maps.event.trigger(GoogleMaps.maps.exampleMap , 'resize')。

请参阅：

Answer 2

看起来你没有传递地图lib需要的正确实例

google.maps.event.trigger(GoogleMaps.maps.exampleMap.instance , 'resize')

resizeevent没有解雇

2 个答案: