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

Question

使用带有链接的标签时，无法在Ionic 3应用程序中显示Google Map。

我得到了3tabs，在1个选项卡中我也有一个链接google map for users。

让我们假设我当前的标签名是AddressPage ，当我单击链接以显示google map时，我将使用nav.push()转到MapPage ，并且加载了我的离子头，但我在屏幕中间看不到google map，它显示了我的地图页面中间的上一页AddressPage内容。

我确定我在其中有google地图，因为我在离子含量中有一个按钮，可以显示标记的当前纬度并且可以使用，但是该地图不存在。

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

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

有人可以帮我吗？ 我在stackoverflow和ionic论坛中搜索了很多内容，几乎完成了我在互联网上看到的所有事情。 从添加css就像添加nav-decorator css来隐藏或...。

在此先感谢您的帮助！

它是我的离子信息：

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。 它到处都很好。

如果仍然有任何问题， 请随时发表评论 。