需求:使用腾讯地图,通过输入的地址获取经纬度
1.先引入腾讯地图,参考https://blog.csdn.net/l13620804253/article/details/117254651
2.要调用腾讯地图API获取当前位置的经纬度,需要使用腾讯地图位置服务https://apis.map.qq.com/ws/geocoder/v1/接口(附上楼梯https://lbs.qq.com/service/webService/webServiceGuide/webServiceGeocoder),该接口前端直接正常请求会跨越,需要jsonp来避免报错;
3.引入jsonp:
1)安装vue-jsonp:
npm install vue-jsonp --save
2)在main.js中导入:
import { VueJsonp } from 'vue-jsonp'
Vue.use(VueJsonp)
4.定义方法:
// 根据地址获取坐标
addrToGetCoordinate(addr) {
this.$jsonp('https://apis.map.qq.com/ws/geocoder/v1/', {
key: 'ZBABZ-S5LKO-AQAWR-SNHUD-V3AQS-MSBMB',
output: 'jsonp',
address: addr
})
.then((res) => {
console.log(res)
if (res.status === 0) {
// 处理得到的经纬度
this.coordinate.lat = res.result.location.lat.toFixed(6)
this.coordinate.lng = res.result.location.lng.toFixed(6)
this.postForm.store_longitude = res.result.location.lng
this.postForm.store_latitude = res.result.location.lat
// 用获取到的经纬度,修改地图的中心点
this.changeCenter(res.result.location.lat.toFixed(6), res.result.location.lng.toFixed(6))
}
})
.catch((e) => {
console.log(e)
})
},
5.然后在对应的地方使用;
以上就是web端腾讯地图,通过地址获取经纬度的方法,记得关注点赞~~摸摸哒