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

发布日期： 2024-09-05 11:31 阅读量： 123 来源： 互联网

export default {

head: {

script: [

{ src: 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places' }

]

}

</script>

<div>

</div>

</template>

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>

随便看看