订阅 JS 谷歌地图中的数据

Question

我正在尝试在动态脚本中更改地图的中心。问题是我确实得到了我订阅的数据，但它不会改变地图的中心。我通过在组件内创建一个 setInterval() 并在我在组件外执行该方法后查看数据是否更改来对此进行了测试。下面是代码示例

https://codesandbox.io/s/joey-basic-gmaps-lw5d4

export class AppComponent implements OnInit, OnChanges {
  public markerLat = 39;
  public markerLng = -76;
  title = "CodeSandbox";
  private apiKey = environment.googleMapsAPIkey;

  constructor(private data: DataService) {
    const dynamicScripts = [
      "https://maps.googleapis.com/maps/api/js?key=" + this.apiKey
    ];
    for (var i = 0; i < dynamicScripts.length; i++) {
      const node = document.createElement("script");
      node.src = dynamicScripts[i];
      node.type = "text/javascript";
      node.async = true;
      node.charset = "utf-8";
      document.getElementsByTagName("head")[0].appendChild(node);
    }
  }
  ngOnInit() {
    this.data.markerLat.subscribe(markerLat => this.markerLat = markerLat);
    this.data.markerLng.subscribe(markerLng => this.markerLng = markerLng);
    setTimeout(() => {
      this.initMap();
    }, 1000);
  }
  ngOnChanges() {
    setTimeout(() => {
      this.initMap();
    }, 1000);
  }
  ngOnDestroy() {
    this.data.markerLat.subscribe(markerLat => this.markerLat = markerLat).unsubscribe();
    this.data.markerLng.subscribe(markerLng => this.markerLng = markerLng).unsubscribe();
  }
  initMap() {
    const google = window.google;

    const center = { lat: this.markerLat, lng: this.markerLng };
    const map = new google.maps.Map(document.getElementById("map"), {
      zoom: 8,
      center: center
    });
    const marker = new google.maps.Marker({ position: center, map: map });
  }
}

Answer 1

由于您是从异步源获取数据，因此 initMap 的执行顺序会有所不同。将您的 initMap 方法移动到 subscribe 块中。使用 forkJoin 获取 lat 和 lng 可观察到的首先完成。

试试这个

    import { forkJoin } from 'rxjs';

    export class AppComponent implements OnInit, OnChanges {

    ngOnInit() {
       const latLng = forkJoin(
       this.data.markerLat,
       this.data.markerLng
       ).subscribe(([markerLat, markerLng])=>{
        this.markerLat = markerLat;
        this.markerLng = markerLng;
        this.initMap();
     })
   }
 }