如何解决拖动地图标记时,使用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;
}
解决方法
我获得了解决方案,可以对从地图指针到文本字段的位置进行地理编码:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。