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

时间:2016-09-19 19:43:19

标签: google-maps google-maps-api-3 angular ionic2

我创建了一个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);

2 个答案:

答案 0 :(得分:3)

我没有完全相同的问题,但在我的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);
}

答案 1 :(得分:2)

地图解决方案,使用以下代码解决问题:

 Scene scene = new Scene(borderPane, 1000, 800);
    primaryStage.setTitle("Sorting");
    primaryStage.setResizable(false);
    primaryStage.setScene(scene);
    primaryStage.show();

    for (int i = 0; i < 12; i++) {
        int centerx = (int) list.get(i).getLayoutX();
        int centery = (int) list.get(i).getLayoutY();
        CenterX.add(i,centerx);
        CenterY.add(i,centery);
        System.out.println(centerx);
        System.out.println(centery);
    }