uni-app使用腾讯位置服务！并且解决跨域问题！！

原创已于 2022-09-23 18:40:48 修改 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端 #servlet

于 2022-09-22 15:36:34 首次发布

本文介绍如何在uni-app项目中集成腾讯地图服务，包括配置代理以解决跨域问题及发送搜索请求的具体步骤。

第一步：进入腾讯地理位置服务官网：腾讯位置服务 - 立足生态，连接未来

这边使用搜索关键词功能举例子：

步骤：开发文档》选择 WebService API 》复制请求链接

第二步进入uni-app 项目找到 manifest.json的源码视图。并且配置:

"h5": {
		"devServer": {
			"disableHostCheck": true,
			"proxy": {
				"/api": {
					"target": "https://apis.map.qq.com/ws/place/v1/", //目标接口域名
					"changeOrigin": true, //是否跨域
					"secure": false, // 设置支持https协议的代理
					"pathRewrite": { // 如果接口本身没有/api需要通过pathRewrite来重写了地址
						"^/api": ""
					}
				}
			}
		}
	}

这里需要注意 "target": "https://apis.map.qq.com/ws/place/v1/", 的位置

第三步：发送请求

onLoad() {   // 生命周期
		uni.request({
			url:'/api/search?keyword=酒店&boundary=nearby(39.908491,116.374328,1000)&key=KCNBZ-7D7CI-KZMGD-5EVO2-24SR7-DRFW7',    //请求拼接
			success(res) {
				console.log('请求成功',res);
			}
		})
	},