vue 在对接腾讯地图api跨域

最新推荐文章于 2024-07-12 19:47:55 发布

AZP^

最新推荐文章于 2024-07-12 19:47:55 发布

阅读量210

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_47532023/article/details/139516902

版权

问题： 使用vue时有个场景需要调用腾讯地图api，报了跨域问题

解决方案：

使用jsonp进行请求，第一步安装jsonp

npm i vue-jsonp

在main.js中引入jsonp

import {VueJsonp} from 'vue-jsonp';
Vue.use(VueJsonp);

使用jsonp进行请求发送

let res = await this.$jsonp(
   `https://apis.map.qq.com/ws/coord/v1/xxx`,
    {
        locations: `${this.operateForm.latitude},${this.operateForm.longitude}`,
        key: "xxxxxxx", // 你的key
        type: 1,
        output: "jsonp",
    }
);
if (res.status === 0) {
    this.operateForm.txLatitude = res.locations[0].lat;
    this.operateForm.txLongitude = res.locations[0].lng;
} else {
    this.$message.error(res.message);
}