Angular中vsGoogleAutoComplete选择后仅显示街道号与名称的问题

我之前处理过类似的需求，刚好可以给你一个可行的方案——核心思路是利用vsGoogleAutoComplete的地址选择回调，结合Google Places API返回的地址组件（address components）来拆分信息，把街道号+名称单独填入目标输入框，其余字段对应填充。具体操作如下：

1. 模板中绑定地址选择事件 #

首先在你的输入框上绑定库提供的(addressSelected)事件，这个事件会返回完整的Google Place对象，里面包含我们需要的地址拆分信息：

<!-- 街道名称输入框 -->
<input 
  type="text" 
  vsGoogleAutoComplete 
  (addressSelected)="handleAddressSelection($event)"
  placeholder="输入街道名称"
  [(ngModel)]="streetAddress"
>

<!-- 其他需要填充的字段示例 -->
<input type="text" [(ngModel)]="city" placeholder="城市">
<input type="text" [(ngModel)]="postalCode" placeholder="邮编">
<input type="text" [(ngModel)]="country" placeholder="国家">

2. 在组件中解析地址组件 #

在TypeScript代码里实现handleAddressSelection方法，遍历Place对象的address_components数组，根据组件类型提取对应信息：

import { Component } from '@angular/core';

// 定义地址组件的类型（如果库未导出，可自行定义）
interface AddressComponent {
  long_name: string;
  short_name: string;
  types: string[];
}

interface PlaceResult {
  address_components: AddressComponent[];
  // 其他属性根据库的返回值补充
}

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  streetAddress = '';
  city = '';
  postalCode = '';
  country = '';

  handleAddressSelection(place: PlaceResult) {
    // 重置所有字段
    this.streetAddress = '';
    this.city = '';
    this.postalCode = '';
    this.country = '';

    // 遍历地址组件，匹配对应类型
    place.address_components.forEach(component => {
      // 提取街道号码（street_number）和街道名称（route）
      if (component.types.includes('street_number')) {
        this.streetAddress = component.long_name;
      }
      if (component.types.includes('route')) {
        this.streetAddress += ` ${component.long_name}`;
      }

      // 提取城市（通常是locality类型，部分地区可能用administrative_area_level_2）
      if (component.types.includes('locality')) {
        this.city = component.long_name;
      }

      // 提取邮编（postal_code）
      if (component.types.includes('postal_code')) {
        this.postalCode = component.long_name;
      }

      // 提取国家（country）
      if (component.types.includes('country')) {
        this.country = component.long_name;
      }
    });
  }
}

3. 注意事项 #

• 地址类型适配：不同地区的地址组件类型可能有差异，比如部分国家的城市可能对应administrative_area_level_2而非locality，你可以根据实际测试调整类型匹配逻辑。
• 库配置检查：确保你的vsGoogleAutoComplete配置中开启了返回完整Place对象的选项（有些库需要设置returnFullResult: true之类的参数），否则可能拿不到address_components数组。
• API权限：确认你的Google API密钥已经启用了Places API，否则地址建议和组件返回都会失效。

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