慕村9548890
2023-06-29 20:58:51
我正在嘗試更新應用程序中的地圖組件,我希望刷新位置并將地圖平移到表單中輸入的緯度和經度。我現在有這個: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 地圖)屏幕)。有什么辦法可以讓這成為可能嗎?
1 回答
慕容708150
TA貢獻1831條經驗 獲得超4個贊
嘗試下面
訂閱
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()
}
添加回答
舉報
0/150
提交
取消
