时间戳

首页 > 解决方案 > 如何从数据库 Firestore 存储经纬度

javascript - 如何从数据库 Firestore 存储经纬度

问题描述

我正在尝试从数据库 FireStore 存储纬度和经度，因此可以检索它并用于传单以在地图上显示标记。

Firebase 服务类

export interface PostionsAddress {
  id?: string,
  name: string,
  notes: string,
  lat:any,
  lng:any
}


@Injectable({
  providedIn: 'root'
})
export class PostionServiceService {

  private ideas: Observable<PostionsAddress[]>;
  private ideaCollection: AngularFirestoreCollection<PostionsAddress>;


  constructor(private afs: AngularFirestore) {
    this.ideaCollection = this.afs.collection<PostionsAddress>('Locations');
    this.ideas = this.ideaCollection.snapshotChanges().pipe(
      map(actions => {
        return actions.map(a => {
          const data = a.payload.doc.data();
          const id = a.payload.doc.id;
          return { id, ...data };
        });
      })
    );
  }

  getIdeas(): Observable<PostionsAddress[]> {
    return this.ideas;
  }



}

这是主页类的代码

export class HomePage {

  private $location: Observable<PostionsAddress[]>;

  map: Map;

  constructor(public auth: AngularFireAuth,private locationservice:PostionServiceService) {  }


  ionViewDidEnter() { this.loadmap(); }

  loadmap() {
    setTimeout(() => {
      this.map = new Map('map').setView([33.3152, 44.3661], 10);

      tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

      }).addTo(this.map);

       ---- HERE GETTING COORDS FROM DATABASE ------
      this.locationservice.getIdeas().pipe(map(a=>{
        return a.map(a=>{
          let Icon = L.icon({
            iconUrl: 'assets/marker-icon.png',
          });
          L.marker([a.lat,a.lng], {
            icon: Icon
          }).addTo(this.map);
          console.log(a.lat,a.lng)
        })
      })) 

    }, 100);
  }

}

问题是，根据我上面在主页类中的代码，标记没有显示在地图上，并且控制台日志中没有错误显示。任何想法请为什么根据我上面的代码标记没有显示在地图上？

标签： javascriptfirebasegoogle-cloud-firestoreleaflet

解决方案

最后我解决了为什么标记没有显示在地图上的问题！.

将数据保存到 firestore 数据库后，我创建了从数据库getAllMarkers中检索数据标记集合的方法Firebase Service Class，而getAllMarkers()将返回所有标记（作为可观察对象）。

  getAllMarkers() {
    return this.afs.collection("Locations").valueChanges();
  }

home.ts 文件

 loadmap() {
    setTimeout(() => {
      this.map = new Map('map').setView([33.3152, 44.3661], 10);

      tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

      }).addTo(this.map);

     ---------- HERE-----------

      this.locationservice.getAllMarkers().subscribe((markers: any) => {
        markers.forEach(singlemarker => {

          let Icon = L.icon({
            iconUrl: 'assets/marker-icon.png',
          });
          L.marker([singlemarker.lat, singlemarker.lng], {
            icon: Icon
          }).addTo(this.map);
          console.log(singlemarker.lat, singlemarker.lng)
        });
      });


    }, 100);
  }

现在我在地图上有所有标记

推荐阅读