4

我试图通过创建一个视图并将其插入 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);
}

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

任何帮助表示赞赏。

4

2 回答 2

5

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

您还需要补偿GMaps API v3 中的问题 1448。此代码中的某些内容应该可以解决后续渲染中的偏离中心的地图：

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

作为参考，更新的 jsFiddle带有上述建议。

于 2013-04-11T03:15:03.887 回答
2

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

于 2014-01-09T09:43:45.787 回答