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

Question

我正在尝试更新应用程序中的地图组件，我希望刷新位置并将地图平移到表单中输入的纬度和经度。我现在有这个：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 地图平移到由当前输入上的值表示的位置，并在该位置添加一个标记。我想在不使用按钮的情况下，在输入坐标时反应性地执行此操作，就像在一定时间后更新地图一样，但通过对我有用的按钮来完成此操作（我在同一个中同时拥有输入和 agm 地图）屏幕）。有什么办法可以让这成为可能吗？

Answer 1

尝试下面

• 订阅valueChanges表单的属性。当您对表单进行任何更改时，这将执行

• 通过管道将订阅传递给debounceTime运算符，这将确保调用函数之前有延迟

• 通过运算符管道 Observable distinctUntilChanged，我们不想对相同的值调用 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()

  }