Angular 爱奥尼亚5 cordova插件谷歌地图还没有准备好。请在执行任何方法之前使用platform.ready()
在使用marker cluster函数时,我遇到了一个错误:cordova插件googlemaps还没有准备好。请在执行任何方法之前使用platform.ready()。我不确定错误指的是什么,说的是什么。我已导入平台语句,但它仍然不起作用。标记群集也未显示。有谁知道为什么请帮忙谢谢Angular 爱奥尼亚5 cordova插件谷歌地图还没有准备好。请在执行任何方法之前使用platform.ready(),angular,typescript,google-maps,ionic-framework,markerclusterer,Angular,Typescript,Google Maps,Ionic Framework,Markerclusterer,在使用marker cluster函数时,我遇到了一个错误:cordova插件googlemaps还没有准备好。请在执行任何方法之前使用platform.ready()。我不确定错误指的是什么,说的是什么。我已导入平台语句,但它仍然不起作用。标记群集也未显示。有谁知道为什么请帮忙谢谢 import { Component } from '@angular/core'; import { MarkersService } from '../services/markers.service'; im
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();
})
}
}
它只是意味着在平台准备就绪后,您应该调用map初始化方法。。 像这样做
ngOnInit() {
this.platform.ready().then(() => {
this.showMap();
}
}
我已经在上面的ngOnInit中更新了它,但错误仍然存在。请检查anonLogin()中的“this.addMarker(locations);”是否在地图初始化之前触发。。shift anonLogin()调用平台。readyi已在上面对其进行了移位和编辑。我还将addCluster方法转移到服务文件中。现在显示此错误:找不到名称“google”。在这一行“if(google.maps){”和“returnnew google.maps.Marker({”我从本教程中获得了参考:declare var google;将其添加到您的服务文件@injectable上方
ngOnInit() {
this.platform.ready().then(() => {
this.showMap();
}
}