Angular中使用Google API获取地理位置及拆分地址详情的问题

AutocompleteService仅提供地址预测建议，无法直接返回完整的地址拆分信息和地理位置。要获取这些数据，你需要结合PlacesService，通过预测结果中的placeId调用getDetails接口来获取完整信息。

步骤1：初始化PlacesService #

PlacesService需要绑定一个DOM元素（可以是隐藏的容器），先在组件模板中添加一个隐藏节点：

<div #placesServiceContainer style="display: none;"></div>

然后在组件类中引入ViewChild并初始化PlacesService：

import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';

@Component({
  // 组件元数据（保持你的原有配置）
})
export class YourComponent implements OnInit {
  private autocompleteService: any;
  private placesService: any;
  @ViewChild('placesServiceContainer') placesServiceContainer!: ElementRef;
  records: any[] = [];

  constructor() { }

  ngOnInit() {
    this.autocompleteService = new google.maps.places.AutocompleteService();
    // 初始化PlacesService
    this.placesService = new google.maps.places.PlacesService(this.placesServiceContainer.nativeElement);
  }

  // 原自动补全方法保持不变
  getAutocompletePredictions(ev): void {
    this.presentPopover(ev);
    const request = {
      input: '15 smith Road',
      types: ['geocode'],
      componentRestrictions: { country: 'au' }
    };

    this.autocompleteService.getPlacePredictions(request, (predictions, status) => {
      if (status === google.maps.places.PlacesServiceStatus.OK) {
        console.log(predictions);
        this.records = predictions;
      } else {
        console.error(`Error retrieving autocomplete predictions: ${status}`);
      }
    });
  }

步骤2：实现getPlaceDetails方法 #

通过选中项的placeId调用getDetails，指定需要返回的核心字段：

getPlaceDetails(placeId: string): void {
    const request = {
      placeId: placeId,
      fields: ["address_components", "geometry", "name", "formatted_address"]
    };

    this.placesService.getDetails(request, (place, status) => {
      if (status === google.maps.places.PlacesServiceStatus.OK) {
        // 获取经纬度地理位置
        const location = place.geometry.location;
        console.log('地理位置:', { lat: location.lat(), lng: location.lng() });

        // 解析拆分后的地址组件
        const addressParts = this.parseAddressComponents(place.address_components);
        console.log('拆分后的地址:', addressParts);
      } else {
        console.error(`Error retrieving place details: ${status}`);
      }
    });
  }

步骤3：解析地址组件 #

编写工具函数，根据address_components的类型标识提取对应地址信息：

private parseAddressComponents(components: any[]): any {
    const addressParts = {
      street: '',
      city: '',
      state: '',
      postalCode: '',
      country: ''
    };

    components.forEach(component => {
      if (component.types.includes('route')) {
        addressParts.street = component.long_name;
      } else if (component.types.includes('locality')) {
        addressParts.city = component.long_name;
      } else if (component.types.includes('administrative_area_level_1')) {
        addressParts.state = component.short_name;
      } else if (component.types.includes('postal_code')) {
        addressParts.postalCode = component.long_name;
      } else if (component.types.includes('country')) {
        addressParts.country = component.long_name;
      }
    });

    return addressParts;
  }

  // 保留你原有的presentPopover方法
  presentPopover(ev): void {
    // 你的原有实现
  }
}

关键说明 #

• AutocompleteService不支持fields参数过滤结果，所以之前请求中的fields配置可以删除。
• PlacesService的fields必须明确指定所需字段，否则仅返回默认子集，务必包含address_components和geometry。
• 地址组件的类型标识（types）可能因地区略有差异，可根据实际需求调整parseAddressComponents中的判断逻辑。

内容的提问来源于stack exchange，提问作者Ka Tech