为什么 Google 地图不允许以角度显示动态经纬度？

Question

我正在尝试以角度加载地图的一些纬度和经度，由于某种原因谷歌地图不允许。

当我单击菜单按钮时，我从 Firebase 取回数据，每个选择都会带回不同的数组。

数据看起来像这样

x_arr = [
    {
        "id" : "Plce ID",
        "name" : "Place",
        "location" : "Location",
        "lat": 00000000,
        "lon": 00000000
    }
]

服务是这样的

this.specific$ = this.x$.pipe(switchMap((x) => {
  return this.db.list('schedules', ref => ref.orderByChild('id').equalTo(x)).valueChanges();   
}));

this.specific$.subscribe({next:(value) => {
    this.x_arr = value;
});

带有地图的组件

 constructor(public f: FireService){}
 center: google.maps.LatLngLiteral = {lat: this.f.x_arr[0]?.lat, lng: this.f.x_arr[0]?.lon };

组件 HTML

   <google-map height="1080"
        width="1920"
        [center]="center"/>

第一次点击时出现错误

InvalidValueError：setCenter：不是具有有限坐标的 LatLng 或 LatLngLiteral：在属性 lat 中：不是数字

如果我点击几次。然后将值推送到地图，然后地图就可以工作了。 但 ！当我选择不同的值时，应该使用新的

lat

和

lon

进行更新，第一个值仍然存在，并且地图永远不会改变。

这里出了什么问题？

Answer 1

Google 地图允许动态更改中心坐标。所以这是您的代码中的一些问题。

在组件构造函数中，确保初始坐标设置正确且不为空。在您的代码中：

center: google.maps.LatLngLiteral = { lat: this.f.x_arr[0]?.lat, lng: this.f.x_arr[0]?.lon };

“000000”不是一个正确的数字，如果你在初始化中有这个数字。 Null 也不是一个正确的数字。尝试设置正确的初始现有纬度/经度。或者，您可以仅在从服务收到第一个坐标时初始化地图。

然后，当您的服务更改 lat/lng 值时，尝试从您的组件显式订阅这些更改。在控制台中打印更改的值，以确保新的中心坐标设置正确。

最后，您可以使用 ChangeDetectorRef 让 Angular 显式地知道发生了更改并且需要重新渲染。您需要将其添加到构造函数中：

constructor (private cdRef: ChangeDetectorRef). 

然后，每次改变中心坐标后，你可以调用：

this.cdRef.detectChanges();