我如何添加谷歌自动完成搜索输入在next3 ?

Question

我正在nuxt3的一个项目上工作，我想在搜索输入上添加谷歌位置自动完成。我已经找了4个小时了，但是没有办法设置。

Answer 1

经过长时间的研究，我发现下面的解决方案在稳定版本中为我工作。

安装以下版本的@fawmi/vue-google-maps

你的包。json文件:

"dependencies": {
"@fawmi/vue-google-maps": "0.9.72",
}

在next .config.ts中添加以下行

build: {
transpile: ["@fawmi/vue-google-maps"],
},

然后创建名为plugins的文件夹，并在其中创建一个名为vueGoogleMaps.ts的文件

📦plugins
┗ 📜vueGoogleMaps.ts

vueGoogleMaps。ts文件:

import { defineNuxtPlugin } from "#app";
import VueGoogleMaps from "@fawmi/vue-google-maps";
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(VueGoogleMaps, {
load: {
key: "Your-key",
libraries: "places", // This is required if you use the Autocomplete plugin
},
autobindAllEvents: true,
});
});

then in example.vue:

<template>
<GMapAutocomplete
placeholder="This is a placeholder"
@place_changed="setPlace"
>
</GMapAutocomplete>
</template>
<script>
export default {
name: 'App',
data() {
return {
}
},
methods: {
setPlace() {
}
}
}
</script>