google-maps - Google Maps v3 + Backbone + Marionette : Map fails to render the second time

Question

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

这是问题的 JSFiddle:http://jsfiddle.net/dyuvH/14/

当您单击“单击以加载 map ”链接时，一切正常，但如果再次执行，则会失败。

我正在使用以下内容将 map 加载到 View 中:

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);
}

同样，第一次一切正常，第二次失败。我认为该 View 保留了 map 的某些方面，反之亦然。在这两种情况下，我都使用"new"键盘创建了 map 和 View 的新实例，所以我不确定出了什么问题。

任何帮助表示赞赏。

Answer 1

对 mapView.render() 的调用不是必需的，可以删除或注释掉。这至少会使 map 在后续点击时呈现。

您还需要赔偿 Issue 1448在 GMaps API v3 中。此代码中的某些内容应该可以解决后续渲染中的偏心贴图:

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

供引用， updated jsFiddle有了上面的建议。