写点什么

HarmonyOS 实战:高德地图自定义定位图标展示

作者:IT小码哥
  • 2025-05-27
    北京
  • 本文字数:1989 字

    阅读完需:约 7 分钟

前言

地图定位功能基本上已经成了日常应用程序的必备功能之一,在日常开发地图定位的功能的时候难免会遇到很多意想不到的问题,本篇文章记录日常开发过程中的细节与完整的流程,帮助更多的开发者避免遇到类似的问题,建议点赞收藏!

实现效果

需求分析

  • 首先需要实现一个自定义的图标替代系统默认的箭头。

  • 获取定位权限与位置信息。

  • 获取定位结果并展示当前位置。

技术实现

  1. 在鸿蒙的实际开发过程中,地图定位权限首先需要申请两个权限,分别是:


const permissions: Array<Permissions> = [  'ohos.permission.APPROXIMATELY_LOCATION',  'ohos.permission.LOCATION']
static applyPermission(context: common.UIAbilityContext, permissions: Array<Permissions>, grantedBlock: () => void, deniedBlock?: () => void) { let atManager = abilityAccessCtrl.createAtManager() let permissionGrantedNumber: number = 0 //记录已经授权的总个数 atManager.requestPermissionsFromUser(context, permissions).then((data) => { for (let index = 0; index < data.authResults.length; index++) { if (data.authResults[index] == 0) { //已授权 permissionGrantedNumber++; } } if (permissionGrantedNumber == permissions.length) { grantedBlock() } else { if (deniedBlock) { deniedBlock() } else { //打开系统设置 PermissionUtil.openPermissionsInSystemSettings(context) } } })}
复制代码


2. 两个权限必须同时申请,缺一不可,同时如果权限是被拒绝过的,那就要手动打开系统设置,跳转到对应应用程序的位置提示用户手动打开权限。


 let bundleInfo: bundleManager.BundleInfo =      await bundleManager.getBundleInfoForSelf(bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION);
let wantInfo: Want = { bundleName: 'com.huawei.hmos.settings', abilityName: 'com.huawei.hmos.settings.MainAbility', uri: 'application_info_entry', parameters: { settingsParamBundleName: bundleInfo.name } } context.startAbility(wantInfo).then(() => { })
复制代码


  1. 得到系统授权后,开始使用高德定位。


 let listener: IAMapLocationListener = {      onLocationChanged: (location) => {        console.info('地图定位成功:  ')      }, onLocationError: (e) => {        console.info('地图定位失败:  ' + JSON.stringify(e))        if (!this.hasUserLocation) {          // 尝试获取缓存位置          this.getLastLocation(success, error)        }      }    };    LocationManager.getInstance().addListener(listener)
复制代码


  1. 定位成功后,添加用户自定义的图标。


 this.aMap?.moveCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(userLat,userLon), 15));          let options: MarkerOptions = new MarkerOptions();          options.setPosition(new LatLng(userLat, userLon));          options.setIcon(await BitmapDescriptorFactory.fromView(() => {            this.customMarkerBuilder()          }))          this.aMap?.addMarker(options);
//自定义图标 @Builder customMarkerBuilder(){ Image($r("app.media.user_location_icon")) .width($r('app.float.vp_40')) .height($r('app.float.vp_40')) }
复制代码


  1. 这里需要特别注意经纬度 userLat,userLon 必须是 float 类型,不然定位不准。这点一定要注意。因为鸿蒙没有提供 float 类型的属性,这里需要使用 Number.parseFloat 对数据进行转换。(真实惨痛经历,定位跑到欧洲去了)。

  2. 当完成这些操作,大多数人都认为基本上可以正常显示了,但是万万没想到地图依然没有定位到当前位置。这是因为很多人忽略了系统的 GPS 定位按钮是否打开,也就是系统下拉菜单中的位置图标。



  1. 必须在检查权限的时候,检查系统位置开关是否打开。


  let location =  geoLocationManager.isLocationEnabled()      console.log("定位权限是否开启:"+location)
复制代码


  1. 如果没有打开,则需要跳转到系统对应的位置提示用户打开。


 context.startAbility(          {            bundleName: "com.huawei.hmos.settings",
abilityName: "com.huawei.hmos.settings.MainAbility",
uri: "location_manager_settings"
},
复制代码


  1. 完成以上操作,地图就能正常显示自定义位置图标了。

总结

鸿蒙对于位置权限要求十分严格,必须同时满足两个权限申请,同时也要注意 GPS 的位置开关是否正常打开。另外特别注意的是经纬度是否是 float 类型,否则会导致位置跑偏。学会的小伙伴赶紧动手试试吧!


用户头像

IT小码哥

关注

还未添加个人签名 2021-04-29 加入

还未添加个人简介

评论

发布
暂无评论
HarmonyOS实战:高德地图自定义定位图标展示_鸿蒙 Ability_IT小码哥_InfoQ写作社区