angular - 拖动地图标记时使用 matGoogleMapsAutocomplete 更新地址字段
问题描述
我正在尝试使用 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;
}
解决方案
我得到了解决方案,用于对从地图指针到文本字段的位置进行地理编码:
推荐阅读
- javascript - 两个组件分别管理自己的状态和道具
- python - 如何在 Python 中编码/解码 JIS X 208、JIS X 212 和 JIS X 213 kuten 字符代码?
- c++ - 结构定义中的 VS2019 alignas 推翻了 pragma pack
- c++ - 为什么我的代码需要这么长时间才能运行,为什么它的运行时会有很大的变化?
- azure - 我看到在诊断和解决我的 Azure 应用服务中报告了 502 错误
- angular - 不能使用角度材料日期选择器
- javascript - 基于 Javascript 的内容从粘性侧边栏中消失
- javascript - 引用者未在 GET 请求中发送,但在 Ionic/Capacitor 应用程序的 POST 中发送
- c++ - 为什么静态成员和静态常量成员在初始化时不一样?
- python - 未来在 python 中的使用