Question

我正在以模式显示谷歌地图，我看到很多人都有这个问题，似乎有一个修复，但到目前为止我没有尝试过任何工作。

基本上我正在加载googles将搜索放在Template.map.rendered中 - 似乎DIV会发生一些事情，因为当我调整窗口大小时它会重新渲染并正确显示。

现在，我尝试了各种技巧（隐藏/显示各种DIV），调用google.maps.event.trigger（map，“resize”）;等

地图模板正在加载到另一个模板中，该模板是一个表单（包含其他字段等）。

如果有人能够指出我会走得很棒的方向 - 看起来应该是一个简单的解决方案，但我很难过。

谢谢！

Answer 1

你很幸运，我们刚刚解决了这个问题。假设模板映射在模态中调用：

Template.map.rendered = function() {

  Tracker.autorun(function() { 

       Session.set('map_available', true);

       var center = {
          latitude: -1.8445
          longitude: 52.9445
       }; // end var center

       var zoomLevel = 15;       

       if(Session.equals('map_available', true)) {

         GoogleMaps.init({'sensor': true, 'key' : 'OPTIONAL_KEY' },
           function() {

              var mapOptions = {
              zoom: zoomLevel,
              minZoom: 15,
              maxZoom: 20,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              navigationControlOptions: {
                  style: google.maps.NavigationControlStyle.SMALL
              };

              map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
              map.setCenter(new google.maps.LatLng( center.latitude, center.longitude ));         

           } // end closure param 2 of GoogleMaps init
       }); // end GoogleMaps.init
    } // end Session.equals 'map_available'

  } //end Tracker.autorun

} // end Template.map.rendered




Template.map.destroyed = function() {
   Session.set('map_available', false);
}

因此，此处的策略是独立监视依赖关系跟踪，并确保在任何DOM响应后重新添加。这里的奖励功能是，如果您在var center内加入Tracker.autorun修改（例如var center = navigator.location），那么当您四处移动时，您将拥有一个改变中心的地图（lat，{{1已经改变了。）

，我们使用扩展程序long进行mrt:googlemaps集成。似乎是最好用的。

Answer 2

有同样的问题困扰了我一个小时。我很容易解决的问题是将它包装在窗口中。尝试一下，你可能会喜欢它： - ）

Template.mapsAutoComplete.rendered = function() {
  window.onload = function () {
    var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
  ...
  };
};

流星：模态和谷歌地图

2 个答案: