NuxtJS接入Google地址自动补全，如何拆分获取国家、城市等独立地址字段

现有代码可优化的核心点 #

• 不要在keydown键盘触发事件中反复创建Autocomplete实例，重复实例会造成内存泄漏、重复绑定事件的问题，仅需在DOM渲染完成、Google Maps脚本加载完成后初始化1次即可
• 引入place_changed事件监听，选中地址后的所有结构化拆分数据都通过该事件回调获取，无需引入第三方地址解析组件

具体实现代码 #

1. 初始化与拆分逻辑 #

替换原有searchAddress方法为仅执行一次初始化的逻辑，核心拆分代码直接写在place_changed事件的回调中，无需额外封装：

initAutocomplete() {
  const defaultBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(-33.8902, 151.1759),
    new google.maps.LatLng(-33.8474, 151.2631)
  )
  const input = document.getElementById('searchTextField')
  const options = {
    bounds: defaultBounds,
    types: ['address'],
    // 指定需要返回的字段，减少接口请求的冗余数据
    fields: ['address_components', 'formatted_address', 'geometry']
  }
  this.autocomplete = new google.maps.places.Autocomplete(input, options)

  // 选中候选地址后触发的拆分逻辑
  this.autocomplete.addListener('place_changed', () => {
    const selectedPlace = this.autocomplete.getPlace()
    const splitAddress = {
      country: '',
      state: '',
      city: '',
      street: '',
      postalCode: '',
      district: ''
    }

    // 遍历地址组件数组，按类型标签匹配对应字段
    selectedPlace.address_components.forEach(part => {
      const partTypes = part.types
      if (partTypes.includes('country')) splitAddress.country = part.long_name
      if (partTypes.includes('administrative_area_level_1')) splitAddress.state = part.long_name
      if (partTypes.includes('locality')) splitAddress.city = part.long_name
      if (partTypes.includes('route')) splitAddress.street = part.long_name
      if (partTypes.includes('postal_code')) splitAddress.postalCode = part.long_name
      if (partTypes.includes('sublocality_level_1')) splitAddress.district = part.long_name
    })

    // 控制台输出拆分完成的独立地址片段
    console.log('结构化拆分结果：', splitAddress)
  })
}

2. 模板调整 #

移除原有v-text-field上绑定的keydown触发初始化逻辑：

<v-text-field 
  id="searchTextField" 
  v-model="searchTextField" 
  label="Digite um endereço" 
  color="rgba(65, 27, 153, 0.95)" 
  outlined>
</v-text-field>

在组件的mounted钩子（确保输入框DOM已渲染）、且Google Maps JS加载完成后调用一次initAutocomplete方法即可。 #

补充提示：部分区域的地址层级无locality类型的城市字段时，可兼容匹配administrative_area_level_2类型作为城市值，避免出现空字段。

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