工作随记work

技术相关

联系我们

联系人:祁海涛

手 机:13212709526

邮 箱:527845769@qq.com

网 址:ddwl.site

地 址:湖北省武汉市青山区白玉山街道

nuxt中使用google地址 autocomplete,不安装插件的方式

时间:2024-09-05 11:31 阅读:20 来源:互联网
<script>
export default {
head: {
script: [
{ src: 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places' }
]
}
}
</script>



<template>
<div>
<input type="text" id="autocomplete" placeholder="Enter your address">
</div>
</template>
<script>
export default {
mounted() {
this.initializeAutocomplete();
},
methods: {
initializeAutocomplete() {
const autocomplete = new google.maps.places.Autocomplete(
document.getElementById('autocomplete'),
{ types: ['geocode'] }
);
autocomplete.addListener('place_changed', () => {
const place = autocomplete.getPlace();

// 处理选中的地址(例如:获取经纬度等)

console.log('place',place)

                    let address_components = place.address_components

                    let len = address_components.length

                    console.log(address_components)


                    if(len>=1) this.info.zip_code = address_components[len-1].long_name

                    if(len>=2) this.info.country = address_components[len-2].long_name

                    if(len>=3) this.info.city = address_components[len-3].long_name

                    if(len>=4) this.info.city = address_components[len-3].long_name + address_components[len-4].long_name

                        // this.info.address = place.formatted_address


                    let str = ''

                    if(len>=4){

                        for (var i = len-5; i >= 0; i--){

                          str += address_components[i].long_name

                        }

                    }

                    this.info.address = str?str:place.formatted_address

                    console.log(this.info)

                    this.$forceUpdate()

});
}
}
}
</script>


Copyright © 2023  东东网络工作室 版权所有  备案号:鄂ICP备2020021332号-1 网站地图