vue 调取腾讯webService API遇到跨域使用 jsonp
今天hr给提了一个需求,外出打卡不仅要地理坐标还要有地理位置,经过调研选择了腾讯API。开发时发现,vue打包上线时遇到跨域问题,查看腾讯api文档建议使用jsonp。1.安装jsonpnpm install vue-jsonp2.main.js 引入import Vue from 'vue'import VueJsonp from 'vue-jsonp'Vue.use(VueJs...
·
今天hr给提了一个需求,外出打卡不仅要地理坐标还要有地理位置,经过调研选择了腾讯API。
开发时发现,vue打包上线时遇到跨域问题,查看腾讯api文档建议使用jsonp。
1.安装jsonp
npm install vue-jsonp
2.main.js 引入
腾讯位置服务 WebServiceAPI
import Vue from 'vue'
import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)
3.举个例子:逆地址解析(坐标转位置信息)
methods:{
getAddresss(lat,lng){
const KEY =XXXXXXXXXXXXXX; //key 秘钥自己申请
let url = 'https://apis.map.qq.com/ws/geocoder/v1?&poi_options=address_format=short&get_poi=0';
let locationdata = lat+','+lng //纬度,经度
this.$jsonp(url,{
key:KEY,
callbackName: 'QQmap',
output:'jsonp',
location:locationdata
})
.then(json => {
let address = json.result.address;
console.log(address) //附近街道地址信息
})
.catch(err => {
console.log(err)
})
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)