uni-app 使用高德SDK在项目中配置后运行到真机报错 Error: AMap JSAPI can only be used in Browser
uni-app 使用高德SDK在项目中配置后运行到真机报错 Error: AMap JSAPI can only be used in Browser
项目信息 | 详情 |
---|---|
产品分类 | uniapp/App |
PC开发环境 | Windows |
PC开发环境版本 | 11 |
HBuilderX类型 | 正式 |
HBuilderX版本 | 4.24 |
手机系统 | Android |
手机系统版本 | Android 15 |
手机厂商 | 华为 |
手机机型 | nova 5 pro |
页面类型 | vue |
vue版本 | vue2 |
打包方式 | 云端 |
项目创建方式 | HBuilderX |
操作步骤:
如问题描述
预期结果:
如何解决
实际结果:
如何结局
bug描述:
我在项目中的manifest.json中配置了定位和maps在h5上运行显示chunk-vendors.js:17821 [system] Map key not configured.在真机上运行显示Error: AMap JSAPI can only be used in Browser.,并且进入地图页面会报错,报错结果如下
[JS Framework] Failed to execute the callback function:
TypeError: Cannot read property ‘__call_hook’ of undefined
14:32:10.133 reportJSException >>>> exception function:_WEEX_CALL_JAVASCRIPT, exception:JavaScript execute error!Uncaught TypeError: Cannot read property ‘__call_hook’ of undefined
at (uni-jsframework.js:1:196166)
at (uni-jsframework.js:1:196223)
at gs (uni-jsframework.js:1:126001)
at switchTab (uni-jsframework.js:1:195366)
at (uni-jsframework.js:1:94509)
at X (uni-jsframework.js:1:57527)
at lv.<computed>.dv.<computed> (uni-jsframework.js:1:286789)
at (uni-jsframework.js:1:294512)
at (uni-jsframework.js:1:130873)
at CallbackManager.consume (uni-jsframework.js:1:1414)
你这是怎么用的?报错不是说了吗,需要在浏览器中使用,不能在app中使用
不好意思,是我自己搞错了,现在已经解决了,麻烦了,谢谢!
回复 1***@163.com:你好 怎么解决的
在uni-app中使用高德地图SDK时遇到“Error: AMap JSAPI can only be used in Browser”的错误,通常是因为高德地图的JSAPI(JavaScript API)只能在浏览器环境中运行,而uni-app在编译到真机(如iOS或Android)时,运行环境并非标准的浏览器环境,而是小程序环境或原生应用环境。因此,直接在小程序或App中使用浏览器版的JSAPI会导致错误。
针对这个问题,你可以考虑以下几种解决方案:
-
使用高德地图的小程序SDK: 如果你是在开发小程序,应该使用高德地图提供的小程序SDK而不是JSAPI。以下是一个基本的示例,展示如何在uni-app中使用高德地图小程序SDK(假设你已经在高德开放平台申请了小程序Key):
// 在页面onReady或onLoad生命周期中初始化地图 onReady() { wx.createMapContext({ mapId: 'myMap', // 地图组件的id success: (res) => { const myAmapFun = new AMapWX({ key: 'YOUR_AMAP_KEY' }); myAmapFun.getMyLocation({ success: (data) => { // 获取位置成功 console.log(data); // 使用获取的坐标更新地图中心 res.centerLocation = { latitude: data.position.lat, longitude: data.position.lng }; res.moveToLocation(); }, fail: (info) => { console.error(info); } }); } }); }
注意:上面的代码是微信小程序的语法,如果你在使用uni-app开发App,则需要使用高德地图的App SDK,而不是小程序SDK。
-
使用高德地图的App SDK: 对于原生App开发,你应该使用高德地图的App SDK。这通常涉及到在原生代码(如Android的Java或Kotlin,iOS的Swift或Objective-C)中集成SDK,并通过uni-app的插件机制或原生模块调用这些功能。由于这涉及到较多的原生开发知识,且超出了纯JavaScript/HTML/CSS的范围,因此在这里不提供具体代码。
-
检查配置: 确保你的项目配置正确,包括在uni-app的manifest.json中正确配置了相关权限和依赖。
总之,解决这个问题的关键是理解不同开发环境(如小程序、App)对SDK的需求不同,并根据目标环境选择合适的SDK进行集成。希望这些信息能帮助你解决问题。