第一步:
添加依赖npm install vue-jsonp --save
第二步:
在vue cli项目main.js中添加
import { VueJsonp } from ‘vue-jsonp’ // 网上很多博客引用不加{},会报错
Vue.use(VueJsonp)
百度:已知经纬度转换成地理位置
在任意.vue文件中使用
// 因为引入了vue-jsonp,所以可以直接使用this.$jsonp, Vue.use(VueJsonp)
//方法里把$jsonp赋给vue原型了:Vue.prototype.$jsonp = jsonp
this.$jsonp('https://api.map.baidu.com/geocoder/v2/?callback=renderReverse&output=json&pois=1' , {
ak: 'ZwTVu16RLXjhW7FHDjYt5HfMnR1dhFpR',
location: e.point.lat + ',' + e.point.lng
}).then((res)=>{
console.log(res)
})
腾讯:直接获取经纬度及定位信息
getAddressByIp() {
this.$jsonp("https://apis.map.qq.com/ws/location/v1/ip?output=jsonp&key=" + 'D4MBZ-VIFKU-QWLVG-GYFOS-KWDZ2-3BF4I', {}).then(res => {
console.log("ip>>>>>>>>>>>")
console.log(res.result)
if (res.status != 0) {
this.$toast("定位异常,请稍后重试")
} else {
try {
let city = res.result.ad_info.city
let province = res.result.ad_info.province
} catch (error) {
this.$toast("定位失败请稍后重试")
}
}
}).catch(err => {
this.$toast.clear();
})
},