角度谷歌地图（AGM）自动完成

Question

我正在使用角度谷歌地图（AGM）来查找地址。现在我希望当一个人选择并解决它时填充输入。我在哪里可以找到像street，str这样的单个地址元素名称。数字，邮政编码等将数据绑定到输入字段？

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"]
        })
]

Answer 2

那么你会发现你需要的所有https://developers.google.com/maps/

我没有在Angular上使用AGM我使用常规API Angular AGM对我不起作用，但常规API工作成功。

Answer 3

我在你的标签中看到了angular和angularjs。对于angular2 +你应该能够做这个教程有用的http://brianflove.com/2016/10/18/angular-2-google-maps-places-autocomplete/

对于angularjs，这是一个很好的小提琴qazxsw poi作为参考。看看他们做qazxsw poi的部分。这就是魔术的一部分。

https://jsfiddle.net/upsidown/1svw299r/也是place对象返回的内容。

Answer 4

试试这个：

google.maps.event.addListener

我正在使用离子4的https://developers.google.com/maps/documentation/geocoding/intro#Types。

<ion-searchbar #searchbar [hidden]="!isSearchbarOpened" [showCancelButton]="true" (search)="onSearch($event)"
  (ionCancel)="isSearchbarOpened = false" (ionBlur)="isSearchbarOpened = false" autocorrect="off" autocapitalize="off"
  spellcheck="off" placeholder="Buscar por endereço">
</ion-searchbar>



@ViewChild('searchbar', { read: ElementRef }) public searchbarElement: ElementRef;



...



// place_changed and geocoding 
this.mapsAPILoader.load().then(() => {

  const searchInput = this.searchbarElement.nativeElement.querySelector('.searchbar-input');

  const autocomplete = new google.maps.places.Autocomplete(searchInput, {
    // types: ['address']
  });

  autocomplete.addListener('place_changed', () => {
    this.ngZone.run(() => {
      const place: google.maps.places.PlaceResult == autocomplete.getPlace();

      if (place.geometry === undefined || place.geometry === null) {
        console.log('place.geometry undefined');
        return;
      }

      this.zoom = 15;
      this.getAddress(place);
      this.isSearchbarOpened = false;
    });
  });
});