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

Question

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

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

假设我当前的选项卡名称是AddressPage， 当我点击链接显示谷歌地图时，我会去MapPagenav.push()我的离子标头加载，但我在屏幕中间看不到谷歌地图，它在地图页面中间显示我上一页AddressPage内容。

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

我使用 Safari 来调试应用程序，当我将所有 ion-App 可见性设置为无时，谷歌地图正在显示。 所以我认为Ionic和Google Map SDK的一些CSS问题。

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

any1 可以帮助我吗？ 我在StackOverflow和Ionic论坛上搜索了很多，我几乎做了我在互联网上看到的所有事情。 从添加 CSS 开始，例如添加导航装饰器 CSS 来隐藏或....

提前感谢任何帮助！

它的离子信息：

ionic (Ionic CLI)  : 4.1.2 (C:UsersASUSAppDataRoamingnpmnode_modulesionic)
Ionic Framework    : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.0
ionViewDidLoad() {
this.isEdit = this.navParams.get('isEdit');
this.loadMap();
}

这是我的地图页面.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%;
}

这是我的地图.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。它在任何地方都很好用。

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