ionic3 谷歌地图未显示在导航堆栈中

Question

使用带有链接的标签时，我无法在 ionic 3 应用程序中显示谷歌地图。

我有 3 个标签，在 1 个标签中我也有一个链接，谷歌地图供用户使用。

假设我当前的标签名称是AddressPage， 当我点击链接显示谷歌地图时，我会去MapPage 和nav.push() 并且我的 ion-header 已加载，但我在屏幕中间看不到谷歌地图，它在地图页面中间显示了我的上一页 AddressPage 内容。

我确定我在那里有谷歌地图，因为我在 ion 内容中有一个按钮，显示标记的当前纬度\lng 并且它可以工作，但地图不存在。

我使用 safari 来调试应用程序，当我将所有 ion-app 可见性设为 none 时，谷歌地图正在显示。 所以我认为它是 ionic 和 google map sdk 的一些 css 问题。

顺便说一句，当我不使用选项卡及其主页时，我可以显示地图，所以在这种情况下我只有这个问题。

任何人都可以帮助我吗？ 我在 stackoverflow 和 ionic 论坛中进行了很多搜索，几乎完成了我在互联网上看到的所有内容。 从添加 css 就像添加 nav-decorator css to hide 或 ....

提前感谢您的帮助！

这是我的离子信息：

ionic (Ionic CLI)  : 4.1.2 (C:\Users\ASUS\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework    : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.0

 ionViewDidLoad() {
    this.isEdit = this.navParams.get('isEdit');
    this.loadMap();
}

这是我的地图 page.ts 代码

ionViewDidLoad() {
    this.isEdit = this.navParams.get('isEdit');
    this.loadMap();
}

//load the map
loadMap() {
    //google map options
    let mapOptions: GoogleMapOptions = {
        camera: {
            target: this.mapCenter,
            zoom: 16,
            tilt: 10,
        },
        mapTypeId: 'ROADMAP',
        controls: {
            myLocationButton: true,
            zoom: false
        },
    };
    this.map = GoogleMaps.create('map_canvas', mapOptions);
    this.showLoading(null);
    this.map.on(GoogleMapsEvent.MAP_READY)
        .subscribe((resp) => {
            this.hideLoading();

        });

}

这是我的地图页面 css

 #map_canvas {
height: 100%;
width: 100%;
  }

这是我的 map.html

<ion-header>
<ion-navbar>
    <ion-title text-center>
        انتخاب آدرس
    </ion-title>
</ion-navbar>
</ion-header>
 <ion-content>

<div id="map_canvas" >

</div>

</ion-content>

Answer 1

当您使用标签时，此解决方案可让您可见并在不同标签之间隐藏谷歌地图。

initialMapLoad: boolean = true;

ngAfterViewInit(){
  this.loadMap();
}

ionViewWillEnter(){
  if (!this.initialMapLoad) {
    // reset div & *then* set visibility to smooth out reloading of map
    this.map.setDiv('map_canvas');
    this.map.setVisible(true);
  } else {
    this.initialMapLoad = false;
  }
}

ionViewWillLeave() {
  // unset div & visibility on exit
  this.map.setVisible(false);
  this.map.setDiv(null);
}

除此之外，您还可以使用 Google maps Javascript API。它在任何地方都很好用。

如果还有问题，请随时发表评论。