有没有办法更新/刷新 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&nbsp;distinctUntilChanged，我们不想对相同的值调用 location&nbsp; import { combineLatest } from 'rxjs';&nbsp; import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';&nbsp; latitude$ = this.myform.get('Latitude').valueChanges;&nbsp; longitude$ = this.myform.get('Longitude').valueChanges;&nbsp; formChanges$ = combineLatest([this.latitude$, this.longitude$]).pipe(&nbsp; &nbsp; debounceTime(1000),&nbsp; &nbsp; distinctUntilChanged(),&nbsp; &nbsp; tap(() => this.refreshMap())&nbsp; )&nbsp; ngOnInit() {&nbsp; &nbsp; this.formChanges$.subscribe()&nbsp; }