是否有更新/刷新agm-map组件的方法？

Question

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

我现在有一个：

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运算符时执行，这将确保在函数被称为
• 管道之前会出现延迟--通过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()
  }