Angular 5 firestore 地理点显示 [object object]

Question

我需要一个关于如何在我的网页列表中显示 GeoPoint 的代码示例。我在我的 android 应用程序中创建了地理点，但它在我的网络显示器上显示为 [object object]。它在我的模型中被定义为一个字符串。我可以找到一些在 Angular 5 中创建地理点的好例子，但有必要将我的手机带到工作现场并在那里创建它，以便办公室的负责人可以验证我在那里。 我是 Angular 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 密钥。最后归结为在其模板中有一个 <agm-map ...> 的 Angular @Component。然后，您无需在控制台中记录纬度和经度，而是设置您已绑定的组件的属性。例如：

@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;
    });
  }
}