Question

我正在尝试通过创建视图并将其插入到DOM中来显示地图，并且第一次正常工作，但在后续的视图调用中失败，显示灰色的空白区域。

以下是问题的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);
}

同样，一切都在第一次完美运行而第二次失败。我认为这个观点正在坚持地图的某些方面，反之亦然。在这两种情况下，我都会使用“新”键盘创建地图和视图的新实例，所以我不确定是什么搞砸了。

感谢任何帮助。

Answer 1

对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以及上述建议。

Answer 2

我遇到了同样的问题，在阅读#19 of Issue1448后，我决定使用onShow代替onRender，然后它就像一个魅力。这样我就不需要触发任何地图调整大小事件或尝试计算出地图的中心。

谷歌地图v3 + Backbone +木偶：地图无法再次渲染

2 个答案: