vue 调取腾讯webService API遇到跨域使用 jsonp

版权声明：干一行、爱一行、爱学习、爱分享！ https://blog.csdn.net/weixin_36951197/article/details/86151768

今天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)
				})
	      }
}