Ionic 5 cordova-plugin-googlemaps还没有准备好.请在执行任何方法之前使用 platfor

Question

在处理标记集群函数时，我收到此错误：cordova-plugin-googlemaps尚未准备就绪。请在执行任何方法之前使用 platform.ready((。我不确定错误指的是什么和在谈论什么。我已经导入了平台声明，但它仍然不起作用。标记簇也没有显示。有谁知道为什么请帮忙谢谢！

import { Component } from '@angular/core';
import { MarkersService } from '../services/markers.service';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { ViewChild, ElementRef } from '@angular/core';
import { Plugins } from '@capacitor/core';
import { AngularFireAuth } from "@angular/fire/auth";
import { Observable } from 'rxjs';
import { AngularFirestoreCollection, AngularFirestore } from '@angular/fire/firestore';
import { map } from 'rxjs/operators';
import { MarkerCluster, GoogleMapsEvent, Marker } from '@ionic-native/google-maps';
import { marker } from 'leaflet';
import { Platform } from '@ionic/angular';
import { database } from 'firebase';
import { GoogleMapsService } from '../services/backup/google-maps.service';
const { Geolocation } = Plugins;
declare var google: any;
@Component({
selector: 'app-marker-map',
templateUrl: './marker-map.page.html',
styleUrls: ['./marker-map.page.scss'],
})
export class MarkerMapPage {
@ViewChild('map', { read: ElementRef, static: false }) mapElement: ElementRef;
infoWindows: any = [];
map: any;
markers: any = [];
markerCluster: any;
data: any;
arr: any;
locations: Observable<any>;
locationsCollection: AngularFirestoreCollection<any>;
user = null;
watch = null;
isTracking = false;
mapCluster: any;
constructor(private afAuth: AngularFireAuth, private afs: AngularFirestore, public platform: Platform, public googleMapsService: GoogleMapsService) {
}
anonLogin() {
this.afAuth.signInAnonymously().then(res => {
this.user = res.user;
console.log(this.user);
this.locationsCollection = this.afs.collection(
`locations/${this.user.uid}/track`,
ref => ref.orderBy('timestamp')
);
//load firebase data 
this.locations = this.locationsCollection.valueChanges();
//update map 
this.locations.subscribe(locations => {
console.log('new locations: ', locations);
this.addMarker(locations);
}); 
});
}
ionViewWillEnter() {
this.showMap();
}
showMap() {
let latLng = new google.maps.LatLng(1.2902706, 103.851959);
let mapOptions = {
center: latLng,
zoom: 11,
disabledDefaultUI: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
this.map.init().then((map) => {
this.mapCluster.addCluster(map);
});
}
addMarker(locations) {
for (let loc of locations) {
let latLng = new google.maps.LatLng(loc.lat, loc.lng);
let marker = new google.maps.Marker({
position: latLng,
timestamp: loc.timestamp,
latitude: loc.lat,
longitude: loc.lng
});
marker.setMap(this.map);
this.addInfoWindowToMarker(marker);
}
}
addInfoWindowToMarker(loc) {
let infoWindowContent = '<div id="content">' +
//'<h2 id="firstHeading" class="firstHeading">' + loc.timestamp + '<h2>' +
'<p>No. of fever cases: ' + loc.timestamp + '<p>' +
//'<p>Longitude: ' + loc.longitude + '<p>' + 
'</div>';
let infoWindow = new google.maps.InfoWindow({
content: infoWindowContent
});
loc.addListener('click', () => {
this.closeAllInfoWindows();
infoWindow.open(this.map, loc);
});
this.infoWindows.push(infoWindow);
}
closeAllInfoWindows() {
for (let window of this.infoWindows) {
window.close();
}
}
startTracking() {
this.isTracking = true;
this.watch = Geolocation.watchPosition({}, (position, err) => {
console.log('new position: ', position);
if (position) {
this.addNewLocation(
position.coords.latitude,
position.coords.longitude,
position.timestamp,
);
}
});
}
stopTracking() {
Geolocation.clearWatch({ id: this.watch }).then(() => {
this.isTracking = false;
});
}
addNewLocation(lat, lng, timestamp) {
this.locationsCollection.add({
lat,
lng,
timestamp
});
let position = new google.maps.LatLng(lat, lng);
this.map.setCenter(position);
this.map.setZoom(9);
}
ngOnInit() {
this.platform.ready().then(() => {
this.anonLogin();
this.showMap();
})
}
}

google-maps.service.ts

import { Injectable } from '@angular/core';
import { Platform } from '@ionic/angular';
//import { ConnectivityService } from './connectivity.service';
import { Geolocation } from 'ionic-native';
import { MarkerCluster, Marker } from '@ionic-native/google-maps';
@Injectable({
providedIn: 'root'
})
export class GoogleMapsService {
markerCluster: any;
locations: any;
constructor(public mapCluster: MarkerCluster) {
}
addCluster(map) {
if (google.maps) {
//Convert locations into array of markers
let markers = this.locations.map((location) => {
return new google.maps.Marker({
position: location,
label: "Hello!"
});
});
this.markerCluster = new MarkerCluster(map, markers);
} else {
console.warn('Google maps needs to be loaded before adding a cluster');
}
}
}

Answer 1

它只是意味着你应该在平台准备好后调用你的map初始化方法。 这样做。

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

参考