今天接到一个需求,需要在我们的H5端,通过地址名称,定位到具体的位置,因为地址是商家填写,后台传给我们前端的,所以需要我用腾讯地图的api去通过地址编译出经纬度,再去定位位置,
然后出bug了,我在调用腾讯api的时候,报跨域
解决方案如下:
前端的话,推荐使用jsonp来解决
1.通过npm安装jsonp
npm i --save vue-jsonp
2.在main.js使用
import {VueJsonp} from 'vue-jsonp'
Vue.use(VueJsonp)
3.在所在页面中使用
methods:{
getUserLocation() {
let url = 'https://apis.map.qq.com/ws/geocoder/v1/?address=';
this.$jsonp(url, {
key: '腾讯地图key',
address:this.address,
output: 'jsonp'
})
.then(res => {
console.log(res)
console.log(res)
const latitude = res.result.location.lat;
const longitude = res.result.location.lng;
this.$wx.openLocation({
latitude: latitude,
longitude: longitude,
name: this.storeData.fullAddress, // 位置名
address: '', // 地址详情说明
scale: 15, // 地图缩放级别,整型值,范围从1~28。默认为最大
infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
});
})
.catch(err => {
console.log(err);
});
},
}