Angular 5 firestore geopoint显示[对象对象]

Question

我需要一个关于如何在我的网页列表中显示GeoPoint的代码示例。我在我的Android应用程序中创建了geopoint，但它在我的网络显示器上显示为[对象对象]。它在我的模型中被定义为一个字符串。我可以找到一些在角度5中创建地点的好例子，但有必要将我的手机带到工作现场并在那里创建它，这样办公室的负责人就可以验证我在那里。 我是anglular 5的新手，但已经整理了一个非常好的网页。 我很感激任何帮助。

Answer 1

文档为here。获得具有GeoPoint属性的文档后，您可以访问latitude和longitude属性。例如，如果您的数据在控制台中显示如下：

...然后您可以访问以下位置：

var docRef = db.collection("cities").doc("QGy13BvW4CSLH9CN9rkI");

docRef.get().then(function(doc) {
  var myGeoProperty = doc.data().location;
  console.log("Latitude:", myGeoProperty.latitude);
  console.log("Longitude:", myGeoProperty.longitude);
});

另请注意，我示例中的数据类型为geopoint（红色圆圈）。

为了显示地理位置，我推荐像Angular Google Maps (AGM)这样的组件。如果你看到他们开始使用cideo端到端，它会引导你完成设置，包括获取Google Maps API密钥。最后，归结为Angular @Component在其模板中有<agm-map ...>。您可以设置已绑定的组件的属性，而不是记录控制台的纬度和经度。例如：

@Component({
  selector: 'my-map-component',
  styles: ['agm-map { height: 480px; }'],
  template: '<agm-map [latitude]="geoLat" [longitude]="geoLong"></agm-map>'
})
export class MyMapComponent implements OnInit {
  geoLat: number = 0.0;
  geoLong: number = 0.0;

  ngOnInit() {
    // init "db" etc.

    let docRef = db.collection("cities").doc("QGy13BvW4CSLH9CN9rkI");

    docRef.get().then(doc => {
      let myGeoProperty = doc.data().location;
      this.geoLat  = myGeoProperty.latitude;
      this.geoLong = myGeoProperty.longitude;
    });
  }
}