Javascript 离子4-导航后地图消失

我在我的Ionic 4应用程序中使用Maps API

当调用组件时，映射被初始化，并且工作良好！但当我关闭并重新打开组件时，贴图将变为灰色，缩放将变远。当我在地图上滑动时，它会重新出现，但我 仍然需要放大很多才能回到标记上

ngAfterViewInit() {

 this.getGoogleMaps()
  .then(googleMaps => {

    this.googleMaps = googleMaps;
    const mapEl = this.mapElementRef.nativeElement;
    this.geocoder = new google.maps.Geocoder();

    this.map = new googleMaps.Map(mapEl, {
      center: this.center,
      zoom: 17,
      disableDefaultUI: true
    });

    this.googleMaps.event.addListenerOnce(this.map, "idle", () => {
      this.renderer.addClass(mapEl, "visible");
    });

    if (!this.selectable) {

      const marker = new googleMaps.Marker({
        position: this.center,
        map: this.map,
        title: this.title,
        icon: {
          'url': '../../assets/icons/map-pin.png'
        },
        animation: google.maps.Animation.DROP
      });

      marker.setMap(this.map);

    }

    // show preview

    if (this.previewPlace) {
      this.selectedPlace = this.previewPlace;
      this.focus();
    }

  })
  .catch(err => {
    console.log(err);
  });

}

private getGoogleMaps（）：承诺

我通过在IonViewDiCenter（）而不是ngAfterViewInit（）上初始化映射来修复它

private getGoogleMaps(): Promise<any> {
  const win = window as any;
  const googleModule = win.google;
  if (googleModule && googleModule.maps) {
    return Promise.resolve(googleModule.maps);
  }
  return new Promise((resolve, reject) => {
    const script = document.createElement("script");
    script.src =
    "https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxx";
    script.async = true;
    script.defer = true;
    document.body.appendChild(script);
    script.onload = () => {
      const loadedGoogleModule = win.google;
      if (loadedGoogleModule && loadedGoogleModule.maps) {
        resolve(loadedGoogleModule.maps);
      } else {
        reject("Google Maps SDK not available!");
      }
    };
  });