Ionic 5 cordova-plugin-googlemaps尚未准备好。请在执行任何方法之前使用platform.ready（）

Question

[在使用标记簇功能时，出现此错误：cordova-plugin-googlemaps尚未准备好。在执行任何方法之前，请使用platform.ready（）。我不确定错误是指和谈论什么。我已经导入了平台声明，但是它仍然无法正常工作。标记簇也未显示。有谁知道为什么请帮忙谢谢！

import { Component, OnInit } from '@angular/core';
import { ViewChild, ElementRef } from '@angular/core';
import { Platform } from '@ionic/angular';
import { GoogleMap, GoogleMaps, MarkerCluster, GoogleMapsEvent, LatLng, Marker, GoogleMapsAnimation } from '@ionic-native/google-maps';

declare var google: any;

@Component({
  selector: 'app-markercluster',
  templateUrl: './markercluster.page.html',
  styleUrls: ['./markercluster.page.scss'],
})
export class MarkerclusterPage implements OnInit {


  markers: any = [];
  markerCluster: any;
  locations: any;
  map: any;
  @ViewChild('map', { read: ElementRef, static: false }) mapRef: ElementRef;

  /* markers: any = [
    {
      title: "East",
      latitude: "1.348758",
      longitude: "103.991701"
    },
    {
      title: "West",
      latitude: "1.366623",
      longitude: "103.672609"
    },
    {
      title: "North",
      latitude: "1.458400",
      longitude: "103.799669"
    },
    {
      title: "South",
      latitude: "1.282306",
      longitude: "103.823246"
    }
  ]; */
  constructor(public platform: Platform) {
    this.locations = [
      { lat: 1.348758, lng: 103.991701 },
      { lat: 1.366623, lng: 103.672609 },
      { lat: 1.458400, lng: 103.672609 },
      { lat: 1.282306, lng: 103.823246 }
    ];
  }


  ngOnInit() {
  }

  ionViewDidEnter() {
    this.showMap();
  }

  showMap() {
    const location = new google.maps.LatLng(1.2902706, 103.851959);
    const options = {
      center: location,
      zoom: 11,
      disabledDefaultUI: true
    };
    this.map = new google.maps.Map(this.mapRef.nativeElement, options);
    this.updateMap(this.markers);
    this.addCluster();
    console.log('test');
  }

  updateMap(markers) {
    console.log("one")
    for (let marker of markers) {
      let position = new google.maps.LatLng(marker.latitude, marker.longitude);
      let mapMarker = new google.maps.Marker({
        position: position,
        title: marker.title,
        latitude: marker.latitude,
        longitude: marker.longitude
      });

      mapMarker.setMap(this.map);
    }
    console.log("two")
  }


 addCluster() {
    console.log("three");
    if (google.maps) {
      //Convert locations into array of markers 
      let markers = this.locations.map((location) => {
        return new google.maps.Marker({
          position: location,
          label: "Hello!"
        });
      });
      console.log("four")
      this.platform.ready().then(() => {
        this.markerCluster = new MarkerCluster(this.map, markers); // Gets stuck 
          //here where the error appears
      })
      console.log("five")


    } else {
      console.warn('Google maps needs to be loaded before adding a cluster');
    }
  }
}

Answer 1

这只是意味着您应该在平台准备就绪后调用地图初始化方法。这样做吧。

 ngOnInit() {
   this.platform.ready().then(() => {
     this.showMap();
   }
 }

Reference