Ionic 4 - 导航后地图消失

Question

我在 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(): 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!");
      }
    };
  });

}

Answer 1

我通过在 ionViewDidEnter() 而不是 ngAfterViewInit() 上初始化地图来修复它。