情景:使用经纬度逆向解析出具体地址信息——高德接口设置了跨域,直接用request访问即可,腾讯api未设置跨域即使在mainifest.json里对h5设置了允许跨域依旧报错。
解决:在项目名右键——使用命令行窗口打开目录(像vue使用命令行)安装jsonp解决跨域请假问题
npm i --save vue-jsonp
main.js引入
import { VueJsonp } from 'vue-jsonp' //引入时候不用{}包起来,可能会出现undefined (reading 'install')这类报错
Vue.use(VueJsonp)
页面中引用
// 逆地址解析
jx:function(){
this.$jsonp("https://apis.map.qq.com/ws/geocoder/v1", {
key: '申请的密钥',
output: 'jsonp',
location: '31.973969,118.756208',//可以通过uni.getLocation获取,谷歌浏览器会对定位请求清除,有时候定位准,有时候定位不准会出现初始地址甘肃省,但项目发布上https就行了,不准的时候用其他浏览器测试
get_poi:'1'
}).then(resp => {
let res = resp.result;
console.log(res);
// 地址名称,所需参数参考腾讯api文档解释
_this.address=res.formatted_addresses.recommend;
})
},