谷歌地图v3 +骨干+木偶：地图未能第二次渲染

我试图通过创建一个视图并将其插入到DOM中来显示地图，并且它在第一次正常工作，但在后续调用时失败该视图显示一个灰色的空白区域。谷歌地图v3 +骨干+木偶：地图未能第二次渲染

这是问题的的jsfiddle：当你点击“点击加载地图”链接，但如果你再这样做会失败http://jsfiddle.net/dyuvH/14/

，一切工作正常。

我加载地图到视图中使用下列内容：

onRender: function() { 
    var mapOptions = { 
     center: new google.maps.LatLng(-34.397, 150.644), 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var mapView = new App.MapView(); 
    var map = new google.maps.Map(mapView.el, mapOptions); 
    mapView.render(); 
    this.ui.mapContainer.html(mapView.el); 
}

再次，一切完美的第一次，但未能通过第二。我认为这个观点是对地图的某些方面持有的，反之亦然。在这两种情况下，我都会使用“新”键盘创建地图和视图的新实例，所以我不确定会出现什么问题。

任何帮助表示赞赏。

来源

2013-04-10 Nightwolf

我不得不从cdnjs重新加载marionette.js，让它按照你的描述工作 – 2013-11-19 17:08:17

对mapView.render（）的调用不是必需的，可以将其删除或注释掉。这将至少让地图在随后的点击中呈现。

您还需要在GMaps API v3中补偿Issue 1448。沿着该代码的东西应该工作以解决偏离中心地图上后续效果：

google.maps.event.addListener(map, "idle", function(){ 
     map.setCenter(mapOptions.center); 
     google.maps.event.trigger(map, 'resize'); 
    });

作为参考，updated jsFiddle与上述建议。

来源

2013-04-11 03:15:03

很可爱，非常感谢。 – Nightwolf 2013-04-11 18:39:53

工程就像一个魅力！我有完全相同的问题，并且几乎没有希望能够找到答案。很好的答案！ – Mark 2013-05-26 18:14:30

与问题中相同，我必须从cdnjs重新加载marionette.js才能使其按照您的描述工作。感谢你们两位！ – 2013-11-19 17:09:45

我有同样的问题，并在阅读#19 of Issue1448我决定使用onShow而不是onRender然后它就像一个魅力。这样我就不需要触发任何地图大小调整事件或尝试制定地图中心。

来源

2014-01-09 09:43:45 mrydengren

很棒。尝试使用事件侦听器使得很难移动地图，因为它会在拖动它之后重置到中心位置。使用onShow可以很好地工作。 – kgstew 2016-02-23 21:37:59

谷歌地图v3 +骨干+木偶：地图未能第二次渲染

回答

相关问题