如何从数据库 Firestore 存储经纬度答案

【问题标题】：How to store lat and long from database Firestore如何从数据库 Firestore 存储经纬度
【发布时间】：2020-01-02 10:50:45
【问题描述】：

我正在尝试从 Database 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);
  }

}

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

【问题讨论】：

你是否从数据库中获取数据
是的，云火库
console.log(a.lat,a.lng) 来这里做什么？
@PeterHaddad 什么都没有！
那么您没有检索数据..

标签： javascript firebase google-cloud-firestore leaflet

【解决方案1】：

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

将数据保存到firestore数据库后，我在Firebase Service Class中创建了getAllMarkers方法来从数据库中检索数据标记集合，而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);
  }

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

【讨论】：