谷歌地图仅在第一次加载,第二次加载为灰色

Question

我创建了一个Ionic 2/Angular 2 App.我已经集成了谷歌地图,它工作正常.然而,谷歌地图第二次出现完全灰色.我搜索了互联网并尝试了不同的解决方案来解决它.但是,以下解决方案都不起作用: - google.maps.event.trigger(this.map,'resize'); - google.maps.event.clearInstanceListeners/this.map.detach();/this.marker.setMap(null);

当我在chrome中调整视图大小时,突然显示以灰色显示的地图.那么如何手动触发此调整大小.我希望你能提供帮助.

我的代码可以在这里找到https://github.com/marinusgeuze/metjekindnaarbuiten.

最诚挚的问候,Marinus Geuze

===========================================

通过添加下一行代码来解决问题:setTimeout(()=> google.maps.event.trigger(this.map,'resize'),600);

Answer 1

我没有遇到完全相同的问题，但在我的 Ionic 2 应用程序中使用 LeafletJS 时发生了类似的情况，并且invalidateSize在小超时时调用它们的函数解决了我的应用程序的问题。这是一个例子：

ionViewLoaded() {
    console.log('ObservationDetails.ionViewLoaded');

    // Leaflet setup calls here
    ...

    // invalidateSize must be called because the page hasn't been drawn, only loaded,
    // and the map div will get resized causing the "gray block/unloaded map tile"
    // problem. Invalidating the map will fix that, but the call needs a slight 
    // delay before firing...
    setTimeout(() => this.map.invalidateSize(), 600);
}