如何在Nuxt3中添加Google Places自动补全搜索输入框？

嘿，我来帮你搞定这个困扰！折腾了4小时确实挺闹心的，我给你整理了一套在Nuxt3里实现Google Places自动补全的完整步骤，亲测有效：

第一步：配置Google Places脚本加载 #

首先我们需要在Nuxt3的客户端环境加载Google Places的API脚本，用Nuxt的插件来处理最稳妥：

1. 在项目根目录创建plugins/google-places.client.ts文件（后缀.client.ts确保只在客户端执行），内容如下：

export default defineNuxtPlugin(() => {
  useHead({
    script: [
      {
        src: `https://maps.googleapis.com/maps/api/js?key=你的GoogleAPI密钥&libraries=places`,
        async: true,
        defer: true
      }
    ]
  })
})

• 记得把你的GoogleAPI密钥替换成你在Google Cloud控制台申请的密钥，并且要确保已经启用了Places API（在Cloud控制台的API库里搜索启用）
• 为了安全，建议给你的API密钥设置HTTP限制，只允许你的网站域名调用

第二步：创建Google Places自动补全组件 #

接下来封装一个可复用的输入组件，方便在页面中调用：

在components目录下创建GooglePlacesInput.vue，内容如下：

<template>
  <input
    ref="placesInput"
    type="text"
    placeholder="输入地点搜索..."
    class="border rounded px-4 py-2 w-full"
  />
</template>

<script setup lang="ts">
const placesInput = ref<HTMLInputElement | null>(null)
const selectedPlace = ref<any>(null)

// 定义emit事件，把选中的地点数据传给父组件
const emit = defineEmits<{
  'place-selected': [place: any]
}>()

onMounted(() => {
  // 确保window.google对象存在（脚本加载完成）
  if (!window.google?.maps?.places) {
    console.error('Google Places API 加载失败')
    return
  }

  // 初始化自动补全实例
  const autocomplete = new window.google.maps.places.Autocomplete(placesInput.value!, {
    // 可选：设置搜索范围，比如只搜城市
    // types: ['(cities)'],
    // 可选：设置地区限制
    // componentRestrictions: { country: 'cn' }
  })

  // 监听地点选中事件
  autocomplete.addListener('place_changed', () => {
    const place = autocomplete.getPlace()
    selectedPlace.value = place
    // 把选中的地点数据传给父组件
    emit('place-selected', place)
  })
})
</script>

• 你可以根据需求调整输入框样式、搜索类型（比如只搜城市、地址）或者地区限制
• 选中地点后，组件会通过place-selected事件把完整的地点数据（包括地址、经纬度等）传递给父组件

第三步：在页面中使用组件 #

现在你可以在任意页面（比如pages/index.vue）中使用这个组件了：

<template>
  <div class="max-w-md mx-auto mt-10">
    <h2 class="text-xl font-bold mb-4">地点搜索</h2>
    <GooglePlacesInput @place-selected="handlePlaceSelected" />
    <div v-if="selectedPlace" class="mt-4 p-4 bg-gray-50 rounded">
      <h3 class="font-semibold">选中的地点：</h3>
      <p>{{ selectedPlace.name }}</p>
      <p>{{ selectedPlace.formatted_address }}</p>
      <p v-if="selectedPlace.geometry">经纬度：{{ selectedPlace.geometry.location.lat() }}, {{ selectedPlace.geometry.location.lng() }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
const selectedPlace = ref<any>(null)

const handlePlaceSelected = (place: any) => {
  selectedPlace.value = place
  // 这里可以处理选中后的逻辑，比如保存到状态、调用后端接口等
  console.log('选中的地点详情：', place)
}
</script>

一些注意事项 #

• 确保你的Google Cloud账号已经启用了Places API，并且API密钥没有过期或被限制
• 不要在服务端渲染的代码里直接调用window.google，必须确保代码只在客户端执行（比如用onMounted、client-only组件或者.client.ts插件）
• 如果遇到脚本加载慢的问题，可以考虑调整脚本的async和defer属性，或者提前预加载

按照这个流程走下来，应该就能顺利实现Google Places自动补全功能啦！如果还有细节问题可以随时问我~

备注：内容来源于stack exchange，提问作者M Atif Mehmood