google地图api调用报错如何处理

发布日期： 2024-10-18 18:18 阅读量： 101 来源： 互联网

initializeAutocomplete() {

try {

const el = document.getElementById('autocomplete')

const autocomplete = new google.maps.places.Autocomplete(el, { types: ['geocode'] })

const autocompleteListener = autocomplete.addListener('place_changed', () => {

const place = autocomplete.getPlace()

console.log('place', place)

var lat = place.geometry.location.lat()

var lon = place.geometry.location.lng()

let gps = 'lat:' + lat + ' ' + 'lon:' + lon

this.editinfo.gps = gps

this.editinfo.lat = lat

this.editinfo.lon = lon

console.log('gps', gps)

let address_components = place.address_components

let len = address_components.length

console.log(address_components)

var componentForm = {

street_number: 'short_name', //街道

route: 'long_name',

locality: 'long_name', //城市

administrative_area_level_1: 'short_name', //省

country: 'long_name', //国家

postal_code: 'short_name', //邮编

}

for (var i = 0; i < address_components.length; i++) {

var addressType = address_components[i].types[0]

if (componentForm[addressType]) {

var val = address_components[i][componentForm[addressType]]

switch (addressType) {

case 'postal_code':

this.editinfo.zip_code = val

break

case 'locality':

this.editinfo.city = val

break

case 'country':

this.editinfo.country = val

break

default:

break

}

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

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

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

// if(len>=4) this.editinfo.city = address_components[len-4].long_name

// this.info.address = place.formatted_address

// let str = ''

// if(len>=4){

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

// str += address_components[i].long_name

// }

this.editinfo.address = this.$refs.address.value //place.formatted_address//str?str:place.formatted_address

console.log(this.editinfo)

this.$forceUpdate()

// 处理选中的地址（例如：获取经纬度等）

})

window.gm_authFailure = function () {

autocomplete.unbindAll()

google.maps.event.removeListener(autocompleteListener)

google.maps.event.clearInstanceListeners(autocomplete)

el.disabled = false

el.placeholder = ''

el.style.backgroundImage = ''

el.focus()

}

} catch (e) {

console.log('google api fail')

}

上一篇：: nuxt中使用google地址 autocomplete,不安装插件的方式

下一篇：: 左右两边都是随时变动的元素，比较复杂的控制浮动显示效果

google地图api调用报错如何处理

随便看看