我正在使用Angular Google Maps(AGM)查找地址。现在,当一个人选择一个地址时,我想让它填充输入框。我在哪里可以找到单个地址元素名称,例如街道、门牌号、邮政编码等,以将数据绑定到输入字段?
MapsAPILoader
导入到你的组件中。import { MapsAPILoader } from '@agm/core';
@ViewChild('search') searchElementRef: ElementRef;
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;
});
});
});
}
<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"]
})
]
试试这个:
<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;
});
});
});
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);
}
}
});