Hbuilder打包的vue cli app获取高德地图定位服务key的问题[解决]

本文介绍了解决Hubilder打包的VueCLI App在使用高德地图服务时遇到的定位问题的方法,包括如何获取应用的安全码SHA1及PackageName,并完成API key的正确配置。

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

Hubilder打包的vue cli app获取高德地图定位服务key时出现的问题,导致定位出错,无法获取位置信息,以下是解决方法:

解决步骤:

1.开始申请高德定位的key,可填写到 manifest.json的地图sdk中,如果是第一次申请key,可以随意填写一个key或者找一个其他已经申请的key填上就好,

目的是让app在获取 位置时报错,能够进行下一步:

此步可能出现的问题就是你有可能不知道自己的安全码SHA1,所以在高德API控制台都无法补充表单,接下来解决如何获取自己的app安全码SHA1

2.获取发布版安全码SHA1:

在获取位置定位的代码中

        function getGeocode(){
          plus.geolocation.getCurrentPosition( geoInf, function ( e ) {
            alert('没有获取到位置信息!')
            alert(JSON.stringify(e))//在这里可以获取到错误信息,将它弹出来
            setTimeout('getGeocode()',2000)
          },{geocode:true});
        }
        function geoInf(position){
          console.log(position);//app中console不了
        }

以下是定位出错的信息

由于涉及到项目,所以将一部分代码划去,现在分析出错信息:

SHA1就存在于蓝色框内,就是SHA1AndPackege之后,那一段红色下划线部分,之后框起来的是packegeName; packegeName是自定义的; 

如果你是用模拟器在线调试的话,你可以在hbuilder的控制台复制SHA1,如果不是你可以对照着码字都可以!

3.复制完了的话就可以补充到高德API key申请的表单上了,至此你的 SHA1获取完成

4.PackageName的话就可以manifest.json自定义,打包的时候不要改变,然后填写到这里就可以了! 然后进行下一步 到key申请完成!

5.将申请好的key重新填写到SDK高德定位那里就好了!

vue cli 4.x引入高德地图时出现白屏的问题通常是由于地图引用不正确或缺少必要的配置所导致的。 首先,确保你已经按照高德地图提供的官方文档正确引入了地图API,并且在index.html文件中正确指定了高德地图的脚本,如下所示: ```html <script src="https://webapi.amap.com/maps?v=1.4.15&key=your_amap_api_key"></script> ``` 注意替换`your_amap_api_key`为你自己的高德地图API key。 另外,如果你的应用是基于Vue Router进行路由管理的,那么需要在Vue Router的配置中添加一条路由记录,用于在加载地图时初始化地图组件。在你的路由配置文件中,添加以下代码: ```javascript import AMapLoader from '@amap/amap-jsapi-loader'; // 配置Vue Router const router = new VueRouter({ routes: [ // ...其他路由配置... { path: '/map', component: { beforeRouteEnter(to, from, next) { // 在进入路由前动态加载地图 AMapLoader.load().then(() => { next(); }); }, render: h => h(App), }, }, ], }); ``` 这样在访问`/map`路径时,会动态加载地图组件,避免白屏问题。 最后,检查你的地图相关组件的使用和配置是否正确。确保在地图容器元素上设置了正确的宽度和高度,并且在加载地图时传入了正确的地图容器ID。 通过以上的步骤检查和调整,希望能够解决引入高德地图白屏的问题。如果问题仍然存在,建议查看浏览器的开发者工具中的控制台输出,以便进一步定位问题所在。
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值