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

【问题标题】：Updating address fields with matGoogleMapsAutocomplete when dragging map marker拖动地图标记时使用 matGoogleMapsAutocomplete 更新地址字段
【发布时间】：2020-12-28 21:01:13
【问题描述】：

我正在尝试使用 agmCore npm 模块在我的项目中实现谷歌地图。

因此，当我使用 matGoogleMapsAutocomplete 指令在输入框中搜索地址时。地图坐标也随之更新，标记在地图中移动，同时更新 Country、city 和 postal_code 字段。

但是每当我将地图标记拖到新位置时，我都想触发城市、州和邮政编码的更新。我怎样才能做到这一点？

这是我的代码

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;
  }

【问题讨论】：

标签： angular google-maps google-maps-markers angular-google-maps agm

【解决方案1】：

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

stackblitz link

【讨论】：