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

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中的问题1448.此代码中的某些内容应该可以解决后续渲染中的偏离中心的地图:

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

作为参考,更新的jsFiddle与上述建议.