angular - 使用 Typescript 将数据从 Firebase 检索到 Google 地图

Question

我已成功将数据从 Firebase 存储并检索到我的应用程序。控制台日志显示正在检索的数据。但在 html 代码中，当我尝试在 infoWindow 中显示数据时，它显示未定义。

一些例子：

控制台日志中给出的信息。从 Firebase 获取数据并在 Google 地图中显示标记：

    *new locations:  
    Array(4)
    0: {lng: 103.991701, lat: 1.348758, timestamp: 1591880775484}
    1: {timestamp: 1591880805856, lng: 103.799669, lat: 1.4584}
    2: {timestamp: 1591880807857, lat: 1.282306, lng: 103.823246}
    3: {lat: 1.366623, timestamp: 1591881216351, lng: 103.672609}
    length: 4
    __proto__: Array(0)*

我无法在此处显示图像，但对于信息窗口，检索到的纬度和经度值是未定义的。

这是我的 marker-map.page.ts 页面：

    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';

    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 = [];

      locations: Observable<any>;
      locationsCollection: AngularFirestoreCollection<any>;
      user = null;
      watch = null;

      isTracking = false;

      constructor(private afAuth: AngularFireAuth, private afs: AngularFirestore) {
        this.anonLogin();
        //this.markerData = {} as MarkerData;
      }

      ionViewWillEnter() {
        this.loadMap();
      }

      loadMap() {
        let latLng = new google.maps.LatLng(1.2902706, 103.851959);

        let mapOptions = {
          center: latLng,
          zoom: 5,
          disabledDefaultUI: false
        };
        this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
      }

      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.updateMap(locations);
          })
        });
      }

      updateMap(locations) {
        this.markers.map(marker => marker.setMap(null));
        this.markers = [];

        for (let loc of locations) {
          let latLng = new google.maps.LatLng(loc.lat, loc.lng);

          let marker = new google.maps.Marker({
            position: latLng,
            latitude: loc.lat,
            longitude: loc.lng,
            //animation: google.maps.Animation.DROP,
            map: this.map
          });
          this.markers.push(marker);
          this.addInfoWindowToMarker(marker);
        }
      }

      addInfoWindowToMarker(loc) {
        let infoWindowContent = '<div id="content">' + 
                                  '<h2 id="firstHeading" class="firstHeading">' + 
                                  '<p>Latitude: ' + loc.lat + '<p>' +
                                  '<p> Longitude: ' + loc.lng + '<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();
        }
      }

      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(5);
      }

      ngOnInit() {
      }
    }

有什么建议请帮忙！谢谢你。

标签： angulartypescriptfirebaseionic-framework