angularjs - Angular 谷歌地图 (AGM) 自动完成

Question

我正在使用 Angular 谷歌地图 (AGM) 来查找地址。现在我希望当一个人选择并解决它时，它会填充输入。在哪里可以找到单个地址元素名称，例如 street、str。号码、邮政编码等将数据绑定(bind)到输入字段？

Answer 1

我们可以使用google maps api找到一些详细信息，按照步骤操作。

第 1 步:将 MapsAPILoader 导入您的组件。

import { MapsAPILoader } from '@agm/core';
@ViewChild('search') searchElementRef: ElementRef;

第 2 步:实现 findAdress() 方法并在您的 ngAfterViewInit() 方法中调用它。

findAdress(){
 this.mapsAPILoader.load().then(() => {
      let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement);
      autocomplete.addListener("place_changed", () => {
        this.ngZone.run(() => {
          // some details
          let place: google.maps.places.PlaceResult = autocomplete.getPlace();
          this.address = place.formatted_address;
          this.web_site = place.website;
          this.name = place.name;
          this.zip_code = place.address_components[place.address_components.length - 1].long_name;
          //set latitude, longitude and zoom
          this.latitude = place.geometry.location.lat();
          this.longitude = place.geometry.location.lng();
          this.zoom = 12;
        });
      });
    });
}

第 3 步:对 html 文件进行一些更改。

  <input #search autocorrect="off" autocapitalize="off" spellcheck="off" type="text" class="form-control">

第 4 步:不要忘记在 AgmCoreModule 配置中添加地点库。

    import { AgmCoreModule } from '@agm/core';


   imports: [
      AgmCoreModule.forRoot({
          apiKey: 'your_key',
          libraries: ["places"]
        })
]