Google 地图只加载第一次，第二次是灰色的

Question

我创建了一个 Ionic 2 / Angular 2 应用程序。我已经集成了 Google 地图并且它工作正常。然而，Google 地图第二次显示为完全灰色。我已经在互联网上搜索并尝试了不同的解决方案来解决它。但是，none 以下解决方案有效： - google.maps.event.trigger(this.map, 'resize'); - google.maps.event.clearInstanceListeners / this.map.detach(); / this.marker.setMap(空);

当我在 chrome 中调整视图大小时，原来显示为灰色的地图突然显示出来。那么如何手动触发此调整大小。希望能帮到你。

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

此致，马里努斯·格泽

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

问题已通过添加下一行代码解决： 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);
}

Answer 2

地图的解决方案，使用以下行代码解决问题：

// you must use "map" variable name, or you can use your defined variable name
// Example : var map = (new google.maps.Map(...));

setTimeout(function() { google.maps.event.trigger(map, 'resize') }, 600);

Google 地图只加载第一次，第二次是灰色的

Google maps only load the first time, second time it is gray

google-maps

google-maps-api-3

ionic2

angular