NuxtJS中配置Google Places搜索框仅返回街道门牌号和路线的方法

Google Places API返回的地址为结构化组件格式，你只需在地址选中回调中提取对应字段拼接即可，适配NuxtJS框架的实现逻辑如下：

通用实现逻辑 #

所有接入方式核心逻辑一致：选中地址后，遍历返回结果的address_components数组，提取types包含street_number和route的两个字段值，拼接后赋值给搜索框绑定变量即可。

• 不要直接使用返回结果里的formatted_address或name字段，这两个字段默认返回完整地址，无法直接过滤多余字段

场景1：使用Google官方Autocomplete原生组件 #

这是最常用的接入方式，监听组件的place_changed事件处理即可，NuxtJS环境下要注意初始化逻辑仅在客户端执行，避免SSR阶段报错：

// 仅客户端执行，可写在onMounted生命周期内
let autocomplete
onMounted(() => {
  autocomplete = new window.google.maps.places.Autocomplete(
    document.getElementById('address-search-input'),
    // 可根据需求调整搜索限制参数，比如限制国家
    { types: ['address'] }
  )
  // 绑定选中事件
  autocomplete.addListener('place_changed', handlePlaceSelect)
})

// 地址选中回调
const handlePlaceSelect = () => {
  const place = autocomplete.getPlace()
  let streetNumber = ''
  let route = ''

  // 遍历提取对应字段
  place.address_components?.forEach(component => {
    const typeList = component.types
    if (typeList.includes('street_number')) {
      streetNumber = component.long_name
    }
    if (typeList.includes('route')) {
      route = component.long_name
    }
  })

  // 拼接结果，处理无门牌号的边界情况
  const showAddress = [streetNumber, route].filter(Boolean).join(' ').trim()
  // 赋值给搜索框绑定的响应式变量
  searchInputVal.value = showAddress
}

场景2：自行封装请求Places API的自定义下拉组件 #

如果你是自行调用autocomplete接口拉取预测列表、自己实现下拉UI，选中选项后调用Place Details接口拿到完整的结构化地址数据，再套用上面的字段提取逻辑拼接结果即可。

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