Google maps 样式Vue2谷歌地图自动完成，如vuetify v-text-field

我想知道，将gmap自动完成字段设置为vuetify v文本字段的最佳方式是什么。 我已经看过Vuetify谷歌自动完成模块，但它抛出了很多错误，比我预期的更多或更大的问题

最简单的方法是什么

<gmap-autocomplete></gmap-autocomplete> 

像

<v-text-field></v-text-field>

---

在不改变功能的情况下

我用vue和vuetify实现了google地址自动完成功能

您需要使用“v-autocomplete”而不是“v-text-field”。它也是vuetify组件

我将分享一些关于我的基本实现的代码（我的组件更复杂）

请记住将您的APIKEY放在URL中

另外，在我的实现中，我添加了debounce库，以便在自动完成中添加一些延迟，如果您愿意，我可以添加具有此功能的代码

代码：

<template>
    <v-autocomplete
            prepend-icon="account_box"
            v-model="address"
            :items="items"
            name="address"
            :search-input.sync="search"
            label="Address"
            placeholder="Address"
            class="pa-3"
            autocomplete="off"
            :loading="loading"
            :filter="d=>d"
            color="secondary"
            item-color="secondary"
            return-object
            @change="change"
    ></v-autocomplete>
</template>
<script>
    export default {
        data() {
            return {
                items: [],
                search: null,
                address: null
            }
        },
        watch: {
            search(){
                //Optional: here you can add some delay
                this.googleSearch()
            }
        },
        methods: {
            googleSearch() {
                let url = 'https://maps.googleapis.com/maps/api/geocode/json?key={YOURAPIKEY}&address='
                fetch(url + this.address)
                    .then((response) => {
                        return response.json()
                    })
                    .then(jsonResult => {
                        this.items = jsonResult.map(item => {
                            //You can explore and use other information inside "item" like latitude, longitude, country, City, zipCode
                            return {
                                text: item.formatted_address,
                                value: item.formatted_address
                            }
                        })
                    }).catch(err => { 
                        //handle errors 
                        console.log(err)
                     })
                        
            }
        }
    }

</script>

导出默认值{
数据（）{
返回{
项目：[]，
搜索：空，
地址：空
}
},
观察：{
搜索（）{
//可选：在这里您可以添加一些延迟
这是googleSearch（）
}
},
方法：{
谷歌搜索{
让url为空https://maps.googleapis.com/maps/api/geocode/json?key={YOURAPIKEY}&地址='
获取（url+this.address）
。然后（（响应）=>{
返回response.json（）
})
。然后（jsonResult=>{
this.items=jsonResult.map（item=>{
//您可以探索并使用“项目”中的其他信息，如纬度、经度、国家、城市、zipCode
返回{
text:item.formatted_地址，
值：item.formatted\u地址
}
})
}).catch（错误=>{
//处理错误
console.log（错误）
})
}
}
}

试试这个，对我有用：

---

我需要将“id”绑定到一些唯一的东西，以便在同一页面上有多个字段实例。

这并没有像OP使用的那样使用Google Places API，也没有实现，而是将输入发送到Geocoder服务，它的计费率较高，对于Places autocomplete功能来说确实不够。您可以使用并构建自己的小部件，从而控制外观、功能和行为。@MrUpsidown您能告诉我一些资源的方向吗？

npm i vuetify-google-autocomplete