Ioni c 5 cordova-plugin-googlemaps не готов. Пожалуйста, используйте platform.ready () перед выполнением любых методов - PullRequest
Новая
       42

Ioni c 5 cordova-plugin-googlemaps не готов. Пожалуйста, используйте platform.ready () перед выполнением любых методов

1 голос
/ 17 июня 2020

Во время работы над функцией кластера маркеров я получил ошибку: 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');
    }

  }
}

1 Ответ

1 голос
/ 17 июня 2020

Это просто означает, что вы должны вызвать методы инициализации карты после того, как платформа будет готова .. Сделайте это так. 

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

Ссылка

...