Angular 谷歌地图 (AGM) 自动完成
Posted
技术标签:
【中文标题】Angular 谷歌地图 (AGM) 自动完成【英文标题】：Angular google maps (AGM) autocomplete 【发布时间】：2018-06-01 20:31:49 【问题描述】：我正在使用 Angular 谷歌地图 (AGM) 来查找地址。现在我希望当一个人选择并解决它时，它会填充输入。在哪里可以找到单个地址元素名称，例如 street、str。号码、邮政编码等将数据绑定到输入字段？
【问题讨论】：
您能否在 [plunker](plnkr.co) 或演示环境中发布您的示例，以便我们在使用 agm 时看到您目前的进度？ 【参考方案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"]
)
]
【讨论】：
谢谢！从 Angular 6+ 开始，我的测试突然开始失败，因为我忘记在我的 spec.ts 导入中包含libraries: ["places"]
新的 google.maps.places.Autocomplete 来自哪里？
$ npm install @types/googlemaps --save-dev ***.com/questions/36064697/…【参考方案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);
);
【讨论】：
以上是关于Angular 谷歌地图 (AGM) 自动完成的主要内容，如果未能解决你的问题，请参考以下文章
Angular Google Maps - 在 AGM-MAP 标签和使用 map = new google.maps.Map() 之间创建地图差异