使用Angular和agm获取用户地理位置信息并居中放置Google热图

Question

我正在尝试绘制以当前用户位置为中心的Google热图。

我有点傻。我已经设置了基本方法，但是我正在努力在正确的时间调用这些方法。我知道Angular中有各种生命周期挂钩，但是我不认为这是我想要的（？）。

我基本上想先在绘制地图之前先获取用户的地理位置，然后再以用户的位置作为地图的属性之一来绘制地图。

当前，地图通过我的视图呈现：

<agm-map (mapReady)="onMapLoad($event)">
  <agm-marker></agm-marker>
</agm-map>

但是我想通过组件来实现。因此，函数调用将是：第一个onGetLocatio()，其回调为onShowPosition()，最后必须调用onMapLoad()。这是正确的方法（呼叫顺序），还是有更好的方法？

以下是我的控制器方法：

onGetLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(this.onShowPosition);
  } else {
    console.log('Not supported by browser!');
  }
}

onShowPosition = (position: any) => {
  this.currentLat = position.coords.latitude;
  this.currentLong = position.coords.longitude;

  this.currentLatLng = new google.maps.LatLng(this.currentLat, this.currentLong);
  console.log(this.currentLatLng);
}

onMapLoad(mapInstance: google.maps.Map) {
  this.map = mapInstance;
  this.map.setCenter(this.currentLatLng);

  this.heatmap = new google.maps.visualization.HeatmapLayer({
    map: this.map,
    data: this.heatMapData
  });
}

提前谢谢！