HBuilderX 开发uniapp打包之后定位、选择地图无法使用的原因

最新推荐文章于 2025-06-05 15:19:19 发布
最新推荐文章于 2025-06-05 15:19:19 发布
阅读量7.2k 收藏 24
点赞数
CC 4.0 BY-SA版权
文章标签： uniapp 安卓 地图 定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/mr_lihuijie/article/details/119645384
本文指导如何在HBuilderX中为Android和iOS平台配置高德和百度地图API，包括申请应用、添加Key并填写到manifest.json，强调不同证书SHA1的选择与应用名称的准确性。

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

一、未配置地图key

使用定位和选择地图需要配置地图apikey，如图，可选择百度或高德地图（二选一）

云端打包地图功能需要到第三方地图平台申请应用后获取相关配置参数：

  1. 高德LBS开放平台
  2. 百度LBS开放平台
    配置参数需要提交云端打包后才能生效，如果需要真机运行生效请使用自定义基座

二、配置方式

高德LBS开放平台申请应用

登录 高德LBS开放平台，点击有上角的“控制台”按钮，在控制台界面左侧导航列表选择“应用管理”下的“我的应用”。

创建应用

如果已经创建应用可忽略此步骤
在“我的应用”页面，点击右侧“创建新应用”按钮，输入应用名称、选择应用类型，点击“创建”按钮创建应用。

创建应用

添加Android平台应用的KEY

需要打包为Android平台原生应用时操作，否则跳过此步骤
在创建应用项的右侧点击“+”按钮，添加Key：

添加Android平台Key

  • Key名称
    根据规则而填入Key名称，如“uniapp-android”
  • 服务平台
    选择“Android平台”
  • 发布版安全码SHA1
    应用打包时使用证书的指纹字符串（SHA1）
    HBuilderX云端打包选择“使用自有证书”或本地离线打包时，填写应用使用证书的SHA1，查看证书的信息获取指纹中SHA1值，参考：Android平台签名证书(.keystore)生成指南 - DCloud问答
    HBuilderX云端打包选择“公共测试证书”时，SHA1值为：97:C8:41:01:B9:14:1C:13:0D:D7:5D:74:28:A2:92:25:18:C3:6D:CD，详情参考：Android平台云端打包 - 公共测试证书 - DCloud问答
    HBuilderX云端打包选择“老版本DCloud公用证书”时，SHA1值为：BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58，详情参考：Android平台云端打包 - DCloud公用证书（DCloud老版证书） - DCloud问答
    注意：必须添写实际打包使用证书的SHA1值，否则可能无法显示地图或无法定位
  • PackageName
    应用包名，在提交App云端打包时设置的Android包名，如“uni.UNI4D6B11E”
    注意：必须填写实际打包使用的包名，否则可能无法显示地图或无法定位

点击“提交”后生产新Key，在应用下可获取：

获取Android平台Key


在HBuilderX中将此Key填入到manifest.json文件“（App）SDK配置”页面的“高德定位或地图”项下的“appkey_android”编辑框中

添加iOS平台应用的KEY

需要打包为iOS平台原生应用时操作，否则跳过此步骤
在创建应用项的右侧点击“+”按钮，添加Key：

添加iOS平台Key

  • Key名称
    根据规则而填入Key名称，如“uniapp-ios”；
  • 服务平台
    选择“iOS平台”
  • 安全码Bundle ID
    iOS平台应用包名Bundle ID（AppID），在提交App云端打包时设置的Bundle ID，如“uni.UNI4D6B11E”
    注意：必须填写实际打包使用的Bundle ID，否则可能无法显示图片或无法定位

点击“提交”后生成新Key，在应用下可获取：

获取iOS平台Key


在HBuilderX中将此Key填入到manifest.json文件“（App）SDK配置”页面的“高德定位或地图”项下的“appkey_ios”编辑框中

百度LBS开放平台申请应用

登录 百度LBS开放平台，点击有上角的“控制台”按钮，在控制台看板界面左侧导航列表选择“我的应用”下的“创建应用”。

创建Android平台应用

需要打包为Android平台原生应用时操作，否则跳过此步骤
在创建应用界面选择“Android SDK”：

创建Android平台应用

  • 应用名称
    根据规则而填入应用名称，如“uniapp-android”
  • 应用类型
    选择“Android SDK”
  • 启用服务
    至少勾选“Android地图SDK（含境内外底图）”、“Android定位SDK”，建议全部勾选
  • 发布版SHA1
    应用打包时使用证书的指纹字符串（SHA1）
    HBuilderX云端打包选择“使用自有证书”或本地离线打包时，填写应用使用证书的SHA1，查看证书的信息获取指纹中SHA1值，参考：Android平台签名证书(.keystore)生成指南 - DCloud问答
    HBuilderX云端打包选择“公共测试证书”时，SHA1值为：97:C8:41:01:B9:14:1C:13:0D:D7:5D:74:28:A2:92:25:18:C3:6D:CD，详情参考：Android平台云端打包 - 公共测试证书 - DCloud问答
    HBuilderX云端打包选择“老版本DCloud公用证书”时（HBuilderX 2.3.8之前的版本叫DCloud公共证书），SHA1值为：BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58，详情参考：Android平台云端打包 - DCloud公用证书（DCloud老版证书） - DCloud问答
    注意：必须添写实际打包使用证书的SHA1值，否则可能无法显示地图或无法定位
  • PackageName
    应用包名，在提交App云端打包时设置的Android包名，如“uni.UNI4D6B11E”
    注意：必须填写实际打包使用的包名，否则可能无法显示地图或无法定位

点击“提交”后生成新应用，在应用列表界面会添加新创建的应用项，在“访问应用（AK）”列中点击复制按钮获取AppKey：

获取Android平台Key


在HBuilderX中将此Key填入到manifest.json文件“（App）SDK配置”页面的“百度定位或地图”项下的“appkey_android”编辑框中

创建iOS平台应用

需要打包为iOS平台原生应用时操作，否则跳过此步骤
在创建应用界面选择“iOS SDK”：

创建iOS平台应用

  • 应用名称
    根据规则而填入应用名称，如“uniapp-ios”
  • 应用类型
    选择“iOS SDK”
  • 启用服务
    至少勾选“IOS地图SDK（含境内外底图）”，建议全部勾选
  • 安全码
    iOS平台应用包名Bundle ID（AppID），在提交App云端打包时设置的Bundle ID，如“uni.UNI4D6B11E”
    注意：必须填写实际打包使用的Bundle ID，否则可能无法显示图片或无法定位

点击“提交”后生成新应用，在应用列表界面会添加新创建的应用项，在“访问应用（AK）”列中点击复制按钮获取AppKey：

获取iOS平台Key


在HBuilderX中将此Key填入到manifest.json文件“（App）SDK配置”页面的“百度定位或地图”项下的“appkey_ios”编辑框中

三、注意

HBuilderX3.1.10+版本公共测试证书

可用于测试打包，不要用于正式发布，其信息如下：
MD5: 06:83:8C:C8:40:09:3B:9D:46:89:FC:41:9B:A1:A3:F3
SHA1: 97:C8:41:01:B9:14:1C:13:0D:D7:5D:74:28:A2:92:25:18:C3:6D:CD
SHA256: B0:1D:06:18:0D:00:3E:79:C7:B9:08:89:93:B8:E5:AE:7A:19:B0:DA:11:61:AA:09:7C:7F:39:8A:6F:51:4F:A7
应用签名: 06838c40093b9d4689fc419ba1a3f3

公共测试证书下载

本地离线打包如果需要使用公共测试证书，可从这里下载。
证书密码：123456
证书别名：android

木子啊
关注
uniapp - 详解安卓App打包后使用uni.chooseLocation地址列表一直加载转圈问题，Android安卓app打开地图选择位置时显示空白且无限加载，点击搜索框进去也是一直加载列表空白
资深程序员
09-26 1万+
uni-app，app端平台，安卓Android，uni.chooseLocation，一直加载转圈，高德地图，uniapp打包后中uni.chooseLocation调用地址列表空白并转圈，搜索框无反应，uniapp打包成Android时,使用uni.chooseLocation在App端显示的地址列表是空白的解决办法，一直转圈的解决办法，苹果ios没事就安卓不行，自有证书，换证书也不行，高德证书，使用公共测试证书，定位地址列表一直在加载中，换成新证书还是不显示，真机调试无问题，最新，在ios里可以显示高
uniapp [全端兼容] - 详细实现引入使用 Google 谷歌地图显示及搜索城市地点，提供地图标点、地址搜索、定位导航、中文显示及汉化、地图打位置标点显示、搜索框搜索功能、省市区详细经纬度数据等
热门推荐
资深程序员
07-04 1万+
uniapp，h5移动端网页，微信小程序，Android，苹果ios，app，nvue，谷歌地图，官方，谷歌官方文档，googlemap，申请key，uniApp谷歌地图，详细使用教程，无法访问，集成谷歌地图，app引入谷歌地图，选点定位，地图导航，位置搜索，城市搜索，文字地点模糊查询，地点省市区详细数据，经纬度信息，markers地图标记点，一直报错怎么办，接入google地图不显示报错，谷歌地图插件，vue3，vue2，组件，Key申请流程，谷歌key怎么申请，api文档，网站打不开，用什么插件，在u
uniapp中打包Andiord app，在真机调试时地图以及定位功能可以正常使用，打包成app后失效问题（高德地图）
hcy5201314521的博客
01-23 1652
的andirod平台的key时让你填入的SHA1和包名是个什么东西。（我的问题就是出现在了这里，我以为两个项目的高德地图的key值可以一样，根本就不可能一样，因为两个项目的包名都不一样，所以在我重新又申请了key值之后问题就解决啦）配置里面的高德地图的key值都是一样的，两个项目在真机调试的时候H5端和APP端都可以正常定位，但是，再打包成apk的时候，其中一个项目的app定位会失效。目前两个项目，一个项目是从另一个项目里面分割出来的一整套完整的系统，两个项目。就是申请高德地图要填入的SHA!
【uniapp】 使用HBuilderX进行安卓软件开发时如何实现手机定位功能（保姆级教程）
weixin_65793825的博客
06-05 858
本文通过 uni-app 与高德地图的深度集成，实现了从定位权限申请到地址解析的全流程开发。实际项目中可进一步扩展功能，如添加地图组件实时显示位置、集成路线规划 API 等。
使用HbuilderX 的UNIapp开发app, 打包后定位不能使用的解决方式
影子里的句号
09-03 2607
使用HbuilderX 的UNIapp开发app, 打包后定位不能使用的解决方式
uni-app打包后安卓不显示地图及相关操作详解
会飞的猪0629
08-22 3589
uni-app在浏览器调试map地图正常，但是打包后安卓端不显示的问题解决
uniapp 使用HBuider X打包后，高德地图打不开
X13987338855的博客
03-23 1152
content: `预计${_this.time.slice(_this.time.indexOf('午')+1,_this.time.length)}送达`,mode: 'driving', //可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行），不填默认：'driving',可不填。marks[1].callout.content = `预计${_this.qjshijian.split(' ')[1]}送达 `
HBuilder百度地图显示不出来
飞鱼
09-05 8343
在使用HBuilder开发APP时，要yong
uniapp开发app中配置高德地图定位流程
前端e栈
02-18 7526
在使用uniapp开发app过程中，如何使用高德地图进行定位 高德地图开放平台账号申请 进入高德地图开放平台，注册并登陆开发者账号，完成之后点击进入控制台主页 在应用管理中点击创建新应用 输入并选择你的应用类型，创建完应用后，添加key 选择并输入你的应用信息 key名称可以自定义填写 服务平台选择（这里以）安卓为例 填写安全码、应用包名等信息，完成后提交 创建完成之后拿到生成的key 项目文件中配置高德定位 HBuliderX编辑器中，在项目根目录打开manifest.json这个文件 APP模
uniapp项目使用Hbuilder打包；和证书的获取；高德地图key的获取
lurenlinshen的博客
03-02 3250
uniapp项目使用Hbuilder打包；和证书的获取；高德地图key的获取
uni-app - 使用地图功能打包安卓apk的完美流程以及重要的注意事项（带您一次打包成功）
前端充电宝
04-29 1193
uni-app - 使用地图功能打包安卓apk的完美流程以及重要的注意事项（带您一次打包成功）
Android开发 Apk打包之后百度地图不显示的原因以及解决方法
m1044248152的博客
08-16 2977
**Android开发 Apk打包之后百度地图不显示的原因以及解决方法**今天自己打包了应用上线了还没来及高兴发现百度地图定位不显示了。后来发现原来是因为打包APK的时候生成的SHA1与申请百度地图的秘钥不一致。后来修改了之后就正常了。下面说一下具体的方法。1.打开Android Studio菜单栏view→Tool windows→Terminal 如下图2.输入 keytool -v -list
uniapp开发Android安卓应用打包配置及使用高德地图配置获取定位失败的问题解决(踩坑)
bamboozjy的博客
04-10 1501
uniapp开发安卓APP使用高德地图及定位失败的配置
HBuilder X打包uniapp项目部分功能失效：原因在于签名和原来的不一致
zhuxiangnan的专栏
10-08 957
国庆日期间我们自己打包测试安卓包，安装apk时提示签名不一致，安装后发现离线消息推送功能失效；已上架的app不可以轻易更换签名文件，流程比较繁琐，对用户端也有影响。节后向外包商索要了我们的签名文件，打包后恢复正常。app已上架安卓和苹果应用商店。
Hbuilder打包h5应用后，百度地图定位带几内亚湾问题，附解决方案！
New_Yao的博客
05-29 915
1
uniapp打包后获取位置信息一直转圈的解决方法
qq_41644945的博客
03-01 2333
把证书签名的md5值跳入高德的sha1值里面，PackageName填写HBudilder打包时的Android包名, 然后点击提交，注意一个key只能绑定一个app包。在manifest.json --> App SDK中勾选地图和定位服务，在App模块权限配置中勾选Maps，这样我们可以获取更多的位置服务权限。这里的Android包名一定要记住，这个包名就是高德地图添加应用key的时候PackageName，选择使用自有证书。结果在今天早上把APP打包之后，出现了获取定位时底下的地址一直转圈的问题。
uniapp中使用百度地图(初学者保姆式教学，持续更新)
qq_51649346的博客
03-25 9663
基本使用讲解//创建地图实例，与id匹配 var point = new BMapGL . Point(116.404 , 39.915);//创建中心点的坐标(经纬度)，百度地图在坐标上有个转换，百度对外接口用的是BD09坐标系，这个下一个博客会细说 map . centerAndZoom(point , 15);// 初始化地图，设置中心点坐标和地图级别 map . setHeading(64.5);//设置地图旋转角度 map . setTilt(73);//设置地图的倾斜角度部分参数。
如何在uni-app 中使用百度地图，高精度定位
MrjieQ的博客
12-26 4163
uni-app简单方法让你学会如何在自己的项目中使用百度地图,还能定位自己所在位置
uniapp H5端使用百度地图
卿本无忧的博客
06-26 2688
uniapp H5端使用百度地图，添加标记点并点击标记点显示地址信息
uniapp 中引入高德地图Error in onLoad hook: "ReferenceError: AMap is not defined"
最新发布
07-03
<think>我们正在解决在uniapp中引入高德地图时出现的“AMap isnot defined”错误。根据引用内容，我们可以总结出以下解决方案： 1. **解决方案一**：在实例化AMap对象时，使用`window.AMap`而不是`AMap`。这是因为在某些环境下，AMap可能被挂载在window对象上。例如：```javascriptnew window.AMap.Map('container', {//配置});``` 2. **解决方案二**：考虑使用高德地图的JSAPI而不是uniapp自带的map组件，因为uniapp自带的map组件功能有限，且可能无法满足需求。同时，注意正确引入高德地图的JSAPI。 3. **解决方案三**：在引入高德地图的JS文件时，如果使用模块化导入，注意检查导出方式。引用[3]中提到了一个错误：`SyntaxError: Therequested moduledoes notprovide anexport named'default'`。这可能是由于导入方式不正确。可以尝试使用`import* asamapfrom '...'`或者使用script标签引入。 4. **其他可能的原因**：引用[4]提到了一个类似的错误（hex_md5未定义），这通常是因为相关函数没有正确引入。类比到我们的问题，可能是高德地图的JS文件没有正确加载。**具体实施步骤**： ###步骤1：在index.html中引入高德地图JS API在项目的`index.html`文件的`<head>`标签内添加高德地图JS API的script标签。注意替换为你自己的key。```html<scripttype="text/javascript"src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德地图key"></script> ```###步骤2：在需要使用的页面中检查AMap对象由于高德地图JS API是异步加载的，我们需要确保在AMap对象可用后再执行相关代码。可以在mounted生命周期中检查，或者使用回调函数。###步骤3：使用window.AMap在代码中，使用`window.AMap`来访问AMap对象，避免直接使用`AMap`，因为直接使用可能会在模块化环境中未定义。 ###示例代码```vue<template><view><div id="mapContainer"style="width:100%;height:300px;"></div></view> </template><script>export default{mounted(){//检查window.AMap是否存在，如果不存在，可以动态加载if(window.AMap){this.initMap();}else {//可以添加一个延时，或者监听script加载完成的事件setTimeout(() =>{if (window.AMap) {this.initMap();} else{console.error('高德地图加载失败');}},500);}},methods:{initMap() {//使用window.AMapconstmap =new window.AMap.Map('mapContainer',{zoom:11,//初始化地图层级center:[116.397428,39.90923]//初始化地图中心点});//添加标记constmarker =new window.AMap.Marker({position: [116.397428,39.90923]});map.add(marker);}}} </script>``` ###注意事项-确保网络正常，能够加载高德地图的JS文件。 -如果使用npm方式安装高德地图的模块，可能需要使用其他方式（如vue-amap），但根据引用[2]和[3]，在uniapp中可能更推荐直接使用script标签引入。 -如果使用HBuilderX开发，注意在manifest.json中配置网络权限（如果需要）和webview设置。 ###相关问题1.如何在uniapp中动态加载高德地图JSAPI？2.使用高德地图JS API时，如何优化加载速度？ 3. uniapp中使用高德地图有哪些常见问题及解决方案？[^1]:解决方案一：使用window.AMap[^2]:解决方案二：使用高德地图JSAPI代替uniapp自带map组件[^3]:解决方案三：检查模块导入方式[^4]:其他可能原因：JS文件未正确加载</think>### Uniapp 引入高德地图 "AMap is not defined" 解决方案 在 Uniapp 中引入高德地图时出现 `AMap is not defined` 错误，通常是由于全局对象未正确加载或作用域问题导致的。以下是系统化的解决方案： --- #### **解决方案 1：使用 window.AMap 访问（推荐）** 在实例化地图对象时，显式通过 `window` 对象访问： ```javascript // 错误写法：new AMap.Map() // 正确写法： const map = new window.AMap.Map('mapContainer', { zoom: 12, center: [116.39, 39.9] }); // 添加标记示例 const marker = new window.AMap.Marker({ position: [116.39, 39.9] }); map.add(marker); ``` **原理**：某些打包工具（如 Webpack）可能不会将全局变量注入模块作用域，需通过 `window` 显式访问[^1]。 --- #### **解决方案 2：确保 JS API 正确加载** 在 `index.html` 中通过 `<script>` 标签加载高德地图： ```html <!DOCTYPE html> <html> <head> <!-- 加载高德地图 JS API --> <script src="https://webapi.amap.com/maps?v=2.0&key=您的高德地图KEY"></script> </head> </html> ``` **关键检查点**： 1. 确认 `key` 已替换为[高德开放平台](https://lbs.amap.com/)申请的有效 KEY 2. 确保网络请求无拦截（开发者工具 Network 面板检查） 3. 添加 `defer` 属性避免阻塞：`<script defer src="...">` --- #### **解决方案 3：模块化导入兼容处理** 若使用 npm 包（如 `@amap/amap-jsapi-loader`），需特殊处理： ```javascript // 安装依赖 npm install @amap/amap-jsapi-loader // 在.vue文件中 import AMapLoader from '@amap/amap-jsapi-loader'; export default { mounted() { AMapLoader.load({ key: "您的高德KEY", version: "2.0" }).then((AMap) => { const map = new AMap.Map('mapContainer'); // 直接使用返回的AMap }).catch(e => console.error(e)); } } ``` **优势**：避免全局污染，完美适配模块化环境[^3]。 --- #### **解决方案 4：处理异步加载时序** 通过 `setTimeout` 或事件监听确保 DOM 和 API 就绪： ```javascript mounted() { if (!window.AMap) { setTimeout(this.initMap, 500); // 延迟初始化 } else { this.initMap(); } }, methods: { initMap() { const map = new window.AMap.Map(...); } } ``` --- #### **解决方案 5：修复作用域污染** 检查是否在 `v-if` 或子组件中访问： ```vue <template> <!-- 错误：v-if 可能延迟创建 --> <div v-if="showMap" id="mapContainer"></div> </template> <script> export default { mounted() { this.showMap = true; this.$nextTick(() => { // 确保 DOM 渲染完成 new window.AMap.Map('mapContainer'); }); } } </script> ``` --- #### **终极排查清单** 1. ✅ 检查高德 JS 是否加载成功（开发者工具 Network 面板） 2. ✅ 确认 `new AMap.Map()` 调用前 `window.AMap` 已存在 3. ✅ 避免在 `created` 生命周期操作 DOM，使用 `mounted` 4. ✅ 使用 Web 平台调试：`npm run dev:h5` 5. ✅ 真机调试时添加白名单：高德地图域名 `*.amap.com` > 提示：Uniapp 自带的 `map` 组件功能有限，推荐直接使用高德 JS API 实现复杂地图功能[^2]。 --- ### 相关问题 1. 如何在 Uniapp 中实现高德地图的定位和轨迹绘制功能？ 2. Uniapp 使用高德地图时如何解决跨域问题？ 3. 高德地图 JS API 在 Uniapp 小程序端和 H5 端的差异有哪些？ [^1]: 解决方案一：通过 window 对象访问 AMap [^2]: 解决方案二：使用高德地图 JS API 替代 Uniapp 自带组件 [^3]: 解决方案三：模块化导入兼容处理
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值