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

本文涉及的产品
实时计算 Flink 版,5000CU*H 3个月
智能开放搜索 OpenSearch行业算法版,1GB 20LCU 1个月
实时数仓Hologres,5000CU*H 100GB 3个月
简介: 本文详细介绍了在鸿蒙系统中实现地图定位功能的开发流程与注意事项。首先,开发者需要申请两个必要的定位权限,并确保用户手动开启系统设置中的位置权限。接着,通过高德定位获取用户位置信息,并使用自定义图标替代默认的定位箭头。文章特别强调了经纬度数据必须为float类型,否则可能导致定位不准确。此外,还需检查系统的GPS定位按钮是否开启,以确保定位功能正常使用。通过本文的指导,开发者可以避免常见的定位问题,顺利完成地图定位功能的开发。

前言

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

实现效果

需求分析

  • 首先需要实现一个自定义的图标替代系统默认的箭头。
  • 获取定位权限与位置信息。
  • 获取定位结果并展示当前位置。

技术实现

  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 类型,否则会导致位置跑偏。学会的小伙伴赶紧动手试试吧!

目录
相关文章
|
13天前
|
定位技术 UED
70. [HarmonyOS NEXT 实战案例九] 旅游景点网格布局(下)
在上一篇教程中,我们学习了如何使用GridRow和GridCol组件实现基本的旅游景点网格布局。本篇教程将在此基础上,深入探讨如何优化布局、添加交互功能,以及实现更多高级特性,打造一个功能完善的旅游景点应用。
29 1
|
13天前
|
容器
69.[HarmonyOS NEXT 实战案例九] 旅游景点网格布局(上)
本教程将详细讲解如何使用HarmonyOS NEXT中的GridRow和GridCol组件实现旅游景点网格布局。通过网格布局,我们可以以美观、规整的方式展示各种旅游景点信息,为用户提供良好的浏览体验。
27 1
|
13天前
|
UED
68.[HarmonyOS NEXT 实战案例八] 电影票务网格布局(下)
在上一篇教程中,我们学习了如何使用GridRow和GridCol组件实现基本的电影票务网格布局。本篇教程将在此基础上,深入探讨如何优化布局、添加交互功能,以及实现更多高级特性,打造一个功能完善的电影票务应用。
32 1
|
13天前
|
开发者 容器
67.[HarmonyOS NEXT 实战案例八] 电影票务网格布局(上)
在移动应用开发中,电影票务应用是一个常见的场景,用户可以通过应用查看正在热映的电影信息,并进行选座购票等操作。本教程将详细讲解如何使用HarmonyOS NEXT的GridRow和GridCol组件实现电影票务应用中的电影列表网格布局,帮助开发者掌握网格布局的基本用法和实现技巧。
26 1
|
13天前
|
UED
66.[HarmonyOS NEXT 实战案例七] 健身课程网格布局(下)
在上一篇教程中,我们学习了如何使用GridRow和GridCol组件实现基本的健身课程网格布局。本篇教程将在此基础上,深入探讨如何优化布局、添加交互功能,以及实现更多高级特性,打造一个功能完善的健身课程应用。
22 1
|
13天前
|
设计模式 UED
65. [HarmonyOS NEXT 实战案例七] 健身课程网格布局(上)
本教程将介绍如何使用HarmonyOS NEXT的GridRow和GridCol组件实现健身课程的网格布局展示。健身课程网格布局是一种常见的UI设计模式,适用于展示各种健身课程信息,包括课程名称、教练信息、课程时长、难度级别等。通过网格布局,用户可以快速浏览多个课程,并根据自己的需求选择合适的课程。
26 1
|
13天前
64.[HarmonyOS NEXT 实战案例六] 餐饮菜单网格布局(下)
在上一篇教程中,我们学习了如何使用GridRow和GridCol组件实现基本的餐饮菜单网格布局。本篇教程将在此基础上,深入探讨如何优化布局、添加交互功能,以及实现更多高级特性,打造一个功能完善的餐饮菜单应用。
19 0
|
21天前
|
开发框架 前端开发 JavaScript
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发一
本文介绍了方舟开发框架(ArkUI)及其两种开发范式:基于ArkTS的声明式开发范式和类Web开发范式。ArkUI是用于构建HarmonyOS应用界面的UI框架,提供极简UI语法和基础设施。声明式开发范式使用ArkTS语言,以组件、动画和状态管理为核心,适合复杂团队协作;类Web开发范式采用HML、CSS、JavaScript三段式开发,适用于简单界面应用,贴近Web开发者习惯。文中还概述了两者的架构和基础能力,帮助开发者选择合适的范式进行高效开发。
69 15
|
21天前
|
编解码 前端开发 Java
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发三
本文介绍了基于声明式UI范式的图形绘制与动画效果实现方法,涵盖绘制图形、添加动画效果及常见组件说明三部分内容。在绘制图形部分,详细讲解了如何通过Circle组件为食物成分表添加圆形标签,以及使用Path组件结合SVG命令绘制自定义图形(如应用Logo)。动画效果部分则展示了如何利用animateTo实现闪屏动画,包括渐出、放大效果,并设置页面跳转;同时介绍了页面间共享元素转场动画的实现方式。最后,文章列举了声明式开发范式中的各类组件及其功能,帮助开发者快速上手构建复杂交互页面。
64 11
|
17天前
|
UED 容器
5.HarmonyOS Next开发宝典:掌握Flex布局的艺术
Flex布局(弹性布局)是HarmonyOS Next中最强大的布局方式之一,它提供了一种更加高效、灵活的方式来对容器中的子元素进行排列、对齐和分配空间。无论是简单的居中显示,还是复杂的自适应界面,Flex布局都能轻松应对。
42 0