Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/typescript/8.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular 爱奥尼亚5 cordova插件谷歌地图还没有准备好。请在执行任何方法之前使用platform.ready()_Angular_Typescript_Google Maps_Ionic Framework_Markerclusterer - Fatal编程技术网

Angular 爱奥尼亚5 cordova插件谷歌地图还没有准备好。请在执行任何方法之前使用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

在使用marker cluster函数时,我遇到了一个错误:cordova插件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();
    })
  }
}


它只是意味着在平台准备就绪后,您应该调用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();
   }
 }