我是第一次使用 Angular，我正在尝试修改表单及其组件以显示地图并基于它修改经纬度。但即使使用可拖动，我也不明白如何保存这个新的位置数据。

这是我用于 Lat 和 Lng 的表格的一部分

          ...         
          <div class="field">
            <mat-form-field>
              <mat-label>Latitud: </mat-label>
              <input matInput type="text" formControlName="LAT_PDV" />
            </mat-form-field>
            <mat-error class="forms-errors" *ngIf="form.get('LAT_PDV')?.errors && form.get('LAT_PDV')?.touched">
              <p *ngIf="form.get('LAT_PDV')?.hasError('required')">campo requerido</p>
            </mat-error>
          </div>
          <div class="field">
            <mat-form-field>
              <mat-label>Longitud: </mat-label>
              <input matInput type="text" formControlName="LNG_PDV" />
            </mat-form-field>
            <mat-error class="forms-errors" *ngIf="form.get('LNG_PDV')?.errors && form.get('LNG_PDV')?.touched">
              <p *ngIf="form.get('LNG_PDV')?.hasError('required')">campo requerido</p>
            </mat-error>
          </div>
          <div>
            <p><button
              mat-button
              color="primary"
              type="button"
              (click)="openmap()"
            >
              Modificar
            </button></p>
          </div>
          ...

这是后面的代码

  ...
  openmap() {
    this.dialog.open(MapDialogComponent,{
      width: '50%',height: '50%',panelClass: 'pil-dialog',data: {
        lat: this.formDos?.LAT_PDV,lng: this.formDos?.LNG_PDV,}
    });
  }

这是我的 MapDialogComponent：

...
declare var google: any;

@Component({
  selector: 'app-map-dialog',templateUrl: './map-dialog.component.html',styleUrls: ['./map-dialog.component.scss'],})
export class MapDialogComponent implements OnInit {

  mapRef = null;

  constructor(
    @Inject(MAT_DIALOG_DATA) public data: { lat: string,lng: string },public dialogRef: MatDialogRef<MapDialogComponent>
  ) {}

  ngOnInit() {
    this.loadMap();
  }

  async loadMap() {
    console.log(this.data);
    const mapele: HTMLElement | null = document.getElementById('map');
    this.mapRef = new google.maps.Map(mapele,{
      center: {
        lat: parseFloat(this.data.lat),lng: parseFloat(this.data.lng),},zoom: 16
    });
    google.maps.event
    .addListenerOnce(this.mapRef,'idle',() => {
      this.addMaker(parseFloat(this.data.lat),parseFloat(this.data.lng));
    });
  }

  private addMaker(lat: number,lng: number) {
    const marker = new google.maps.Marker({
      position: { lat,lng },map: this.mapRef,draggable:true,title: 'Here'
    });
  }
}

然而，所有这一切的重点是选择一个新位置并获取新的纬度和经度，以便我可以在表单中使用它，然后使用按钮保存新数据。欢迎任何帮助或建议