解决腾讯地图在uni-app中跨域

已于 2023-03-29 10:03:10 修改
阅读量594 收藏
点赞数
文章标签： uni-app vue.js 前端
于 2023-03-28 10:48:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_58661581/article/details/129811432
版权

1、在终端执行 npm i --save vue-jsonp

2、在请求方法上使用

 多个请求参数时

看~花
关注
uniapp 引入腾讯地图解决H5端接口跨域问题
forever__fish的博客
04-03 3051
什么原因会出现跨域问题呢？我们常常说的跨域，只会出现在浏览器中，因为浏览器同源策略的限制而导致的。同源策略是浏览器最核心也是最基本的安全功能，它会阻止一个域的 javascript 脚本和另一个域的内容进行交互，当双方的 url 不同源（协议、域名、端口三者之一不同）时，就会出现跨域问题。那么我们在 uniapp 中引入腾讯地图后，当需要请求其中的接口时，如果在微信开发者工具中运行，那么是可以正常请求到的；但当我们需要运行在 H5 端进行调试时，浏览器会出现跨域问题，那么我们如何解决呢？
uni-app中使用 unicloud 云开发平台③
qq_41988669的博客
11-11 1248
uniCloud是 DCloud 联合阿里云、腾讯云，为开发者提供的基于 serverless 模式和 js 编程的实现后端服务的云开发平台。不需要服务器的购买配置即可快速创建一个完整的后端服务。
uniapp 引入腾讯地图解决H5端接口跨域
记录本人工作中遇到的问题、经验总结以及分享。
06-29 2528
4、配置文件填写地图key。
解决腾讯地图地址解析跨域问题
weixin_42738504的博客
08-15 2805
腾讯地图，地址解析，解决跨域
腾讯地图——逆地址解析以及解决跨域问题
热门推荐
weixin_46824709的博客
07-01 1万+
详细api参数请查看 官方文档 作者也是在使用的时候遇到了几个问题，我在这给大家避下坑：在本地使用接口的使用我们会遇到No ‘Access-Control-Allow-Origin’ header is present on the requested resource’跨域错误，所以就需要我们在vue.config.js配置代理 vue.fonfig.js 文件： 之后我们就必须改变一下腾讯地图给我们的api接口： 注意这里我加了tx这个标识，改成本地的localhost。当我们调用接口时有报错时可以查看
uniapp解决H5引入腾讯地图跨域问题
weixin_45518336的博客
08-07 864
manifest.json--web配置--腾讯地图填写key。
毕业设计-基于uni-app的学科竞赛系统小程序-（含前端+后台）.zip
05-14
1. uni-app：uni-app是基于Vue.js开发的跨端框架，支持Vue的大部分语法，提供了丰富的组件库，如导航栏、按钮、列表、轮播图等，使得在不同平台上实现一致的用户体验成为可能。 2. 小程序开发：此项目是针对小程序...
天气查询 —— UNI-APP试水
kikpinの手抄小册子
07-08 1477
KIKPIN WEATHER —— 第一个UNI-APP项目记录 毫无章法的随笔流水账： pages(启动页)、subPackages分包、globalSytle样式(状态栏、背景、mp-ali标题栏)、tabBar配置在pages.json； 全局CSS可以写在APP.VUE里，pages中.vue文件样式作用局部，不需scoped；app.vue里面全局引入外部样式表@import "./u...
uni-app 微信小程序，直传图片、视频到OSS
QWH_PYTHON的博客
08-19 1400
uni-app 微信小程序，直传图片、视频到OSS一：配置Bucket跨域访问 一：配置Bucket跨域访问 登录OSS管理控制台 单击Bucket列表，之后单击目标Bucket名称 单击权限管理 > 跨域设置，在跨域设置区域单击设置 单击创建规则，配置如下图所示 ...
UNI-APP使用云开发跨全端开发实战讲解
TCB_CloudBase的博客
12-09 1429
UNI-APP 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。 本文为大家讲解如何采用云开发官方JS-SDK，接入云开发后端服务并支持UNI-APP全部端（不止于微信小程序） JS-SDK和UNI-APP适配器 1.JS-SDK和适配器 云开发官方提供的@cloudbase/js-sdk，主要用来做常规WEB、H5等应用（浏览器运行）的云开发资源调用，也是
uniapp使用腾讯的逆地址解析
qq_45569925的博客
04-20 1287
遇到的问题：H5端调用腾讯地址接口提示跨域，而APP端正常显示。第二步：在跨域的地方引入并使用jsonp。解决方案：使用jsonp解决跨域问题。第一步：下载jsonp。
uniapp 使用腾讯地图 H5端跨域解决方法
NekomataXD的博客
02-06 3439
问题 项目中使用腾讯地图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 thi
解决：腾讯地图API跨域问题，地图选点，搜索
tutouXiaoGe的博客
06-02 8246
解决：腾讯地图API跨域问题，地图选点，搜索 用jsonp，解决跨域，请求url后面要加上 output=jsonp，直接复制代码，换上自己的key可用 $.ajax({ type: 'get', url: 'https://apis.map.qq.com/ws/place/v1/suggestion?output=jsonp', async: false, data: params, dataType: 'jsonp',
Vue3项目调用腾讯地图服务(地址解析 地址转坐标)及使用axios的跨域问题
m0_65607651的博客
12-07 1639
Vue3项目调用腾讯地图服务(地址解析 地址转坐标)及使用axios的跨域问题
vue 在对接腾讯地图api跨域
AZP的博客
06-07 921
使用vue时有个场景需要调用腾讯地图api，报了跨域问题。
uniapp的H5项目腾讯地图跨域问题
qq_43423213的博客
02-08 725
uniapp的H5项目腾讯地图跨域问题
小程序使用腾讯sdk的reverseGeocoder方法解析经纬度，报：fail url not in domain
qbbhgn的博客
11-14 721
“fail url not in domain”错误提示通常意味着请求的 URL 不在指定的域名范围内。 需要在微信公众平台上对请求域名进行配置 将https://apis.map.qq.com配置在如图：
UNIAPP微信H5腾讯地图APi定位逆向解析坐标转换地址
03-03 1850
腾讯地图|地图组件|腾讯位置服务:HTML结构 本文展示HTML结构的操作代码示例 ————————————— 获取秘钥key: 腾讯位置服务创建实例应用（应用管理->创建应用） 地址:https://lbs.qq.com/dev/console/home 获取腾讯JS： (产品-地图-地图组件-前端定位组件) JS地址:https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js <iframe id="geo
微信公众号uniappH5项目使用微信JS-SDK和腾讯地图获取并解析用户地理位置信息
weixin_73610394的博客
02-20 4213
微信公众号使用微信JS-SDK和腾讯地图获取用户地理位置
uniapp uni.chooseLocation腾讯地图 app打包 列表不展示
最新发布
05-14
### 问题分析 在 UniApp 中使用 `uni.chooseLocation` 方法调用腾讯地图时，如果 App 打包后发现位置列表无法正常展示，可能是由于以下几个原因造成的： 1. **未正确配置腾讯地图的应用密钥**：腾讯地图的服务需要绑定有效的应用密钥才能正常使用[^1]。 2. **域名白名单设置错误**：H5 应用中可能因为域名白名单未正确配置而导致功能受限[^3]。 3. **权限不足或缺失**：某些情况下，打包后的 App 可能缺少必要的权限声明，导致地图服务不可用[^2]。 以下是详细的解决方案及相关说明。 --- ### 解决方案 #### 1. 配置腾讯地图应用密钥 确保已经在腾讯位置服务平台注册并创建了应用，获取到合法的 Key。具体操作如下： - 登录 [腾讯位置服务平台](https://lbs.qq.com/) 并完成账号注册。 - 创建一个新的应用，在“我的应用”页面填写应用名称和描述信息。 - 获取生成的 SecretKey 或 Sk，并将其集成到项目中。 对于 UniApp 的配置文件 (`manifest.json`)，需添加以下字段来指定腾讯地图的 Key： ```json { "mp-weixin": { "usingComponents": true, "permissions": [ { "name": "scope.userLocation", "desc": "你的应用需要获取用户的地理位置" } ] }, "h5": { "config": { "appId": "your_tencent_map_key_here" } } } ``` 注意：这里的 `your_tencent_map_key_here` 是指你在腾讯地图平台申请的 Key[^1]。 --- #### 2. 设置域名白名单 如果是 H5 场景下使用的腾讯地图服务，则需要特别关注域名白名单的配置。按照官方文档的要求，除了加入默认支持的 `3gimg.qq.com` 外，还需要将自己的服务器域名也列入其中。例如： - 如果您的网站地址为 `https://example.com`，则需要将该域名添加至腾讯地图后台的白名单中。 - 同时建议优先采用 HTTPS 访问方式，避免因协议不匹配引发定位偏差等问题[^3]。 --- #### 3. 检查 Android/iOS 权限声明 当您将项目打包成原生应用程序时，务必确认已开启设备上的地理信息服务授权请求。可以通过修改 `AndroidManifest.xml` 和 iOS 的 `Info.plist` 文件实现这一目标。 ##### 对于 Android： 确保在 `AndroidManifest.xml` 文件中有以下权限声明： ```xml <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> ``` 同时更新 `<application>` 节点下的 meta-data 属性以加载腾讯 SDK 参数： ```xml <meta-data android:name="com.tencent.map.apikey" android:value="your_tencent_map_key_here"/> ``` ##### 对于 iOS： 编辑项目的 `Info.plist` 文件，增加以下键值对用于提示用户授予定位许可： ```plist <key>NSLocationWhenInUseUsageDescription</key> <string>我们需要访问您的位置以便为您提供附近地点推荐。</string> <key>NSLocationAlwaysAndWhenInUseUsageDescription</key> <string>持续背景模式下也需要读取当前位置数据。</string> ``` --- #### 4. 测试与验证 最后一步是对调整后的代码进行全面测试，包括但不限于以下场景： - 在模拟器环境下运行程序观察效果； - 将 APK/IPA 安装到真实物理机上再次检验其行为表现是否一致； - 利用调试工具查看是否有任何网络通信失败记录或者日志报错消息输出。 示例代码片段供参考： ```javascript // 调用 chooseLocation 接口前先判断当前环境是否允许执行此动作 if (uni.getSystemInfoSync().platform === 'ios') { console.log('iOS platform detected'); } else if (uni.getSystemInfoSync().platform === 'android') { console.log('Android platform detected'); } try { uni.chooseLocation({ success(res) { console.log(`成功选择了 ${res.name}`); }, fail(err) { console.error('选择位置失败', err); } }); } catch(e) { console.error('发生未知异常:', e.message); } ``` --- ### 总结 综上所述，UniApp 开发过程中遇到 `uni.chooseLocation` 功能失效的情况通常源于秘钥配置不当、权限遗漏或是跨域限制等因素所致。逐一排查以上提到的各项条件即可有效解决问题。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值