uniapp 使用腾讯地图 H5端跨域解决方法

最新推荐文章于 2025-03-05 15:44:58 发布

Nekomata.

最新推荐文章于 2025-03-05 15:44:58 发布

阅读量3.4k

点赞数 4

分类专栏：解决跨域文章标签： uni-app

本文链接：https://blog.csdn.net/NekomataXD/article/details/113709378

版权

解决跨域专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了在Vue项目中遇到腾讯地图SDK跨域问题的解决方案，通过引入vue-jsonp库来实现JSONP请求。首先通过npm安装vue-jsonp，然后在main.js中全局注册，最后在具体页面中调用uni.getLocation获取坐标，并使用$jsonp进行跨域请求获取详细地理位置信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题

项目中使用腾讯地图sdk h5端出现跨域问题

解决方法

使用 jsonp 解决跨域

1.先安装 vue-jsonp

npm i --save vue-jsonp

2.再 main.js 中使用

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

3.在页面中使用

onReady() {
	uni.getLocation({
		success: res => {
			this.latitude = res.latitude
			this.longitude = res.longitude
			this.getUserLocation();
		}
	});
},

methods:{
	getUserLocation() {
			let vm = this;
			let locationObj = vm.latitude + ',' + vm.longitude;
			let url = 'https://apis.map.qq.com/ws/geocoder/v1?coord_type=5&get_poi=1&output=jsonp&poi_options=page_size=1;page_index=1';
			this.$jsonp(url, {
				key: '腾讯地图key',
				location: locationObj
			})
			.then(res => {
				console.log(res)
			})
			.catch(err => {
				console.log(err);
			});

		},
}