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

Question

我正在使用Angular Google Maps（AGM）查找地址。现在，当一个人选择一个地址时，我想让它填充输入框。我在哪里可以找到单个地址元素名称，例如街道、门牌号、邮政编码等，以将数据绑定到输入字段？

- Matej Mejak

---

你可以在 plunker 或演示环境中上传你的样例，这样我们就能够在使用agm时看到你的进展了。 - syciphj

Answer 1

我们可以使用 Google Maps API 来查找一些细节，按照以下步骤操作。

步骤1：将 MapsAPILoader 导入到你的组件中。

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

步骤2：实现findAddress()方法，并在您的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;
        });
      });
    });
}

第三步：对您的HTML文件进行一些更改。

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

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

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


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

- Bettaibi Nidhal

---

谢谢！自从Angular 6+以来，我的测试突然开始失败了，因为我忘记在我的spec.ts导入中包含“libraries：[”places"]”。 - Murphy4

新的google.maps.places.Autocomplete是从哪里来的？ - Adnan

$ npm install @types/googlemaps --save-dev https://dev59.com/yFoV5IYBdhLWcg3wmPlH - Liam Hogan

Answer 2

试试这个：

<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;
    });
  });
});

我正在使用 Ionic 4 中的 ion-searchbar。

getAddress(place: Object) {
    this.formatted_address = place['formatted_address'];
    const location = place['geometry']['location'];
    // this.lat = location.lat();
    // this.lng = location.lng();
    console.log(place);

    this.lat = location.lat();
    this.lng = location.lng();

    console.log('formatted_address:', this.formatted_address);
    console.log('Address Object', place);
    this.geocode();

}


geocode() {
  this.placesService.newPlace.lat = this.lat;
  this.placesService.newPlace.lng = this.lng;

  const geocoder = new google.maps.Geocoder();

  const latlng = new google.maps.LatLng(this.lat, this.lng);

  geocoder.geocode({ 'location': latlng }, (results, status) => {
  if (status === google.maps.GeocoderStatus.OK) {

    if (results[0]) {
      // console.log('Location: ' + results[0].formatted_address);
      let houseNumber = '';
      let streetName = '';
      let neighborhood = '';
      let cityName = '';
      let stateName = '';
      let countryName = '';
      let shortAddress = '';
      let zipCode = '';

      // console.log(results[0].address_components.length);
      console.log(results[0].address_components);

      if (results[0].address_components.length === 3) {

        if (results[0].address_components[0].long_name !== null) {
          cityName = results[0].address_components[0].long_name;
        }

        if (results[0].address_components[1].short_name) {
          stateName = results[0].address_components[1].short_name;
        }

        if (results[0].address_components[2].short_name !== null) {
          countryName = results[0].address_components[2].short_name;
        }
      }

      if (results[0].address_components.length === 4) {

        if (results[0].address_components[0].long_name !== null) {
          streetName = results[0].address_components[0].long_name;
        }

        if (results[0].address_components[1].long_name !== null) {
          cityName = results[0].address_components[1].long_name;
        }

        if (results[0].address_components[2].short_name) {
          stateName = results[0].address_components[2].short_name;
        }

        if (results[0].address_components[3].short_name !== null) {
          countryName = results[0].address_components[3].short_name;
        }
      }

      if (results[0].address_components.length === 5) {

        if (results[0].address_components[0].long_name !== null) {
          streetName = results[0].address_components[0].long_name;
        }

        if (results[0].address_components[1].long_name !== null) {
          cityName = results[0].address_components[1].long_name;
        }

        if (results[0].address_components[2].short_name !== null) {
          stateName = results[0].address_components[2].short_name;
        }

        if (results[0].address_components[3].short_name !== null) {
          countryName = results[0].address_components[3].short_name;
        }

        if (results[0].address_components[4].short_name !== null) {
          zipCode = results[0].address_components[4].short_name;
        }

      }

      if (results[0].address_components.length === 6) {

        if (results[0].address_components[0].long_name !== null) {
          houseNumber = results[0].address_components[0].long_name;
        }

        if (results[0].address_components[1].long_name !== null) {
          streetName = results[0].address_components[1].long_name;
        }

        if (results[0].address_components[2].long_name !== null) {
          cityName = results[0].address_components[2].long_name;
        }

        if (results[0].address_components[3].short_name) {
          stateName = results[0].address_components[3].short_name;
        }

        if (results[0].address_components[4].short_name !== null) {
          countryName = results[0].address_components[4].short_name;
        }
      }

      if (results[0].address_components.length === 7) {

        if (results[0].address_components[0].long_name !== null) {
          houseNumber = results[0].address_components[0].long_name;
        }

        if (results[0].address_components[1].long_name !== null) {
          streetName = results[0].address_components[1].long_name;
        }

        if (results[0].address_components[2].long_name !== null) {
          neighborhood = results[0].address_components[2].long_name;
        }

        if (results[0].address_components[3].long_name !== null) {
          cityName = results[0].address_components[3].long_name;
        }

        if (results[0].address_components[4].short_name) {
          stateName = results[0].address_components[4].short_name;
        }

        if (results[0].address_components[5].short_name !== null) {
          countryName = results[0].address_components[5].short_name;
        }
      }




      if (cityName !== '') {
        shortAddress = cityName;
      }
      if (cityName !== '' && stateName !== '') {
        shortAddress += '-' + stateName;
      }
      if (shortAddress !== '' && countryName !== '') {
        shortAddress += ', ' + countryName;
      }
      if (cityName === '' && stateName === '' && countryName === '') {
        shortAddress = '???';
      }

      // console.log('shortAddress:', shortAddress);


      // Set addresses
      this.shortAddress = shortAddress;
      this.fullAddress = results[0].formatted_address;

      const newPlace = {
        lat: this.lat,
        lng: this.lng,
        shortAddress: this.shortAddress,
        fullAddress: this.fullAddress
      };

      this.events.publish('location:changed', newPlace);
    }
  }
});

- Flavio Marques