谷歌地图以Ionic 2中的模态显示

Posted 2021-04-21

我正在开发Ionic 2中的app，我想以模态显示地图。问题是我无法让它发挥作用。相同的代码适用于普通页面，但不适用于模态。我尝试使用谷歌地图API的网页版本，甚至本机cordova插件，但结果是相同的，模态的空白地图，页面上的工作地图。任何建议如何解决这个问题？

答案

你应该set the underneath page to transparent。

这是我调用地图模态的工作代码

html

<ion-content [style.opacity]="isModal ? 0 : 1" padding>
  <button ion-button item-right >
    <ion-icon name="add" (click)="getLocation()"></ion-icon>
  </button>
</ion-content>

打字稿

getLocation() {
  this.isModal = true;
  let mapModal = this.modalCtrl.create(MapModalPage);
  mapModal.onDidDismiss((data) => {
    this.isModal = false;
    if(data) {
      this.location = data.location;
      this.locImage = data.image;
    }
  });
  mapModal.present();
}