拖动地图标记时，使用matGoogleMapsAutocomplete更新地址字段

问题描述

我正在尝试使用agmCore npm模块在我的项目中实现google maps。

因此，当我使用matGoogleMapsAutocomplete指令在输入框中搜索地址时。地图坐标也会随之更新，标记也会在地图中移动，同时还会更新“国家/地区”，“城市”和“邮政编码”字段。

但是，每当我将地图标记拖到新位置时，我都想触发城市，州和邮政编码的更新。我该如何实现？

这是我的代码

HTML：

<div class="container" fxLayout="column" fxLayoutAlign="center">
    <div fxFlex>
        <agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [usePanning]="true" [zoom]="zoom"
            (mapClick)="markerDragEnd($event)">
            <agm-marker [latitude]="latitude" [longitude]="longitude" [markerDraggable]="true"
                (dragEnd)="markerDragEnd($event)"> </agm-marker>
        </agm-map>
    </div>
</div>
<input placeholder="Street,house no. or flat number" class="mb-2 mt-2" matInput matGoogleMapsAutocomplete
    address="formatted_address" [country]="in" (onAutocompleteSelected)="onAutocompleteSelected($event)"
    (onLocationSelected)="onLocationSelected($event)" formControlName="AddressLine1" />

TS：

onAutocompleteSelected(results: PlaceResult) {
    if (
      results &&
      results.address_components &&
      results.address_components.length
    ) {
      results.address_components.forEach((element) => {
        if (element.types[0] == "country") {
          this.KycDetailsForm.get("Country").setValue(element.long_name);
        } else if (element.types[0] == "postal_code") {
          this.KycDetailsForm.get("PostalCode").setValue(element.long_name);
        } else if (element.types[0] == "locality") {
          this.KycDetailsForm.get("City").setValue(element.long_name);
        }
      });
    }
  }

  onLocationSelected(location: Location) {
    this.latitude = location.latitude;
    this.longitude = location.longitude;
  }

markerDragEnd($event) {
    this.latitude = $event.coords.lat;
    this.longitude = $event.coords.lng;
  }

解决方法

我获得了解决方案，可以对从地图指针到文本字段的位置进行地理编码：

stackblitz link