微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决拖动地图标记时,使用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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?