有没有办法更新/刷新 agm-map 组件？答案

【问题标题】：Is there a way to update/refresh the agm-map component?有没有办法更新/刷新 agm-map 组件？
【发布时间】：2021-02-13 06:40:14
【问题描述】：

我正在尝试更新我的应用程序中的地图组件，我希望刷新位置并将地图平移到表单中输入的纬度和经度上。

我现在有这个：

HTML 组件：

    <div class="row">
          <button (click)="refreshMap()" class="btn btn-block">Refrescar localizacion</button>
        </div>

    <agm-map
            [latitude]="myform.get('Latitude').value"
            [longitude]="myform.get('Longitude').value"
            [disableDefaultUI]="true"
            [zoom]="13"
            (mapClick)="mapClicked($event)"
            [usePanning]="true"
          >
            <agm-marker [latitude]="myform.get('Latitude').value" [longitude]="myform.get('Longitude').value"> </agm-marker>
          </agm-map>

打字稿：

 refreshMap() {
    const position = {
      coords: { lat: this.myform.controls.('latitude').value, lng: this.myform.controls.('longitude').value },
    };
    this.marker.position = position.coords;
    const currentLat = this.marker.position.lat;
    const currentLng = this.marker.position.lng;

    this.latitude.setValue(currentLat);
    this.longitude.setValue(currentLng);
 }

这样，当我单击按钮时，它会将 agm-map 平移到由当前输入上的值表示的位置，并在该位置添加一个标记。我想在不使用按钮的情况下执行此操作，并且在键入坐标时做出反应，例如在一段时间后它会更新地图，但是通过按钮执行它对我有用（我同时拥有输入和 agm-map屏幕）。有什么办法可以让这成为可能吗？

【问题讨论】：

标签： javascript angular google-maps-api-3 rxjs

【解决方案1】：

试试下面

订阅表单的valueChanges 属性。这将在您对表单进行任何更改时执行
将订阅通过管道传递给debounceTime 运算符，这将确保函数调用前有延迟
通过distinctUntilChanged 运算符将 Observable 管道化，我们不希望在相同的值上调用 location

  import { combineLatest } from 'rxjs';
  import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';

  latitude$ = this.myform.get('Latitude').valueChanges;
  longitude$ = this.myform.get('Longitude').valueChanges;
  formChanges$ = combineLatest([this.latitude$, this.longitude$]).pipe(
    debounceTime(1000),
    distinctUntilChanged(),
    tap(() => this.refreshMap())
  )
  ngOnInit() {
    this.formChanges$.subscribe()
  }

【讨论】：