华为地图服务 - 如何开启和展示“我的位置”? -- HarmonyOS自学10

一. 场景介绍

本章节将向您介绍如何开启和展示"我的位置"功能,"我的位置"指的是进入地图后点击"我的位置"显示当前位置点的功能。效果如下:

二. 接口说明

"我的位置"功能主要由MapComponentController的方法实现,更多接口及使用方法请参见接口文档

方法名 描述
setMyLocationEnabled(myLocationEnabled: boolean): void "我的位置"图层功能开关,默认使用系统的连续定位能力显示用户位置。开关打开后,"我的位置"按钮默认显示在地图的右下角。点击"我的位置"按钮,将会在屏幕中心显示当前定位,以蓝色圆点的形式呈现。
setMyLocationControlsEnabled(enabled: boolean): void 设置是否启用"我的位置"按钮。只显示按钮,在不开启"我的位置"图层功能的情况下,点击按钮没反应。
setMyLocation(location: geoLocationManager.Location): void 设置"我的位置"坐标。
setMyLocationStyle(style: mapCommon.MyLocationStyle): Promise<void> 设置"我的位置"样式。
on(type: 'myLocationButtonClick', callback: Callback<void>): void "我的位置"按钮点击事件回调。

三. 开发步骤

1. 开启"我的位置"按钮

  1. 启用"我的位置"之前,您需要确保您的应用可以获取用户定位。获取用户定位有两种方式: 方式一(推荐):使用安全控件LocationButton

    方式二:申请ohos.permission.LOCATION和ohos.permission.APPROXIMATELY_LOCATION权限,您需要在module.json5配置文件中声明所需要的权限,具体可参考声明权限

    复制代码
    1. {
    2. "module" : {
    3. // ...
    4. "requestPermissions":[
    5. {
    6. // 允许应用在前台运行时获取位置信息
    7. "name" : "ohos.permission.LOCATION",
    8. // reason需要在/resources/base/element/string.json中新建
    9. "reason": "$string:location_permission",
    10. "usedScene": {
    11. "abilities": [
    12. "EntryAbility"
    13. ],
    14. "when":"inuse"
    15. }
    16. },
    17. {
    18. // 允许应用获取设备模糊位置信息
    19. "name" : "ohos.permission.APPROXIMATELY_LOCATION",
    20. // reason需要在/resources/base/element/string.json中新建
    21. "reason": "$string:approximately_location_permission",
    22. "usedScene": {
    23. "abilities": [
    24. "EntryAbility"
    25. ],
    26. "when":"inuse"
    27. }
    28. }
    29. ]
    30. }
    31. }
  2. 初始化地图并获取MapComponentController地图操作类对象。显示地图章节中有详细讲解。

  3. 调用mapController对象的setMyLocationEnabled方法启用"我的位置"功能。

    1)如果是通过方式二申请用户定位权限,可以在点击安全控件后打开地图,并开启"我的位置"功能。

    复制代码
    1. // 启用我的位置图层

    2. this.mapController.setMyLocationEnabled( true

      );

    3. // 启用我的位置按钮

    4. this.mapController.setMyLocationControlsEnabled( true

      );

    2)如果是通过方式一申请用户定位权限,建议在获得用户授权后开启"我的位置"功能。

    复制代码
    1. import { abilityAccessCtrl, bundleManager, common, PermissionRequestResult, Permissions } from '@kit.AbilityKit';
    2. import { BusinessError } from '@kit.BasicServicesKit';
    3. // 校验应用是否被授予定位权限,可以通过调用checkAccessToken()方法来校验当前是否已经授权。
    4. async checkPermissions(): Promise<boolean> {
    5. const permissions: Array<Permissions> = ['ohos.permission.LOCATION', 'ohos.permission.APPROXIMATELY_LOCATION'];
    6. for (let permission of permissions) {
    7. let grantStatus: abilityAccessCtrl.GrantStatus = await this.checkAccessToken(permission);
    8. if (grantStatus === abilityAccessCtrl.GrantStatus.PERMISSION_GRANTED) {
    9. // 启用我的位置图层,mapController为地图操作类对象,获取方式详见显示地图章节
    10. this.mapController?.setMyLocationEnabled(true);
    11. // 启用我的位置按钮
    12. this.mapController?.setMyLocationControlsEnabled(true);
    13. return true;
    14. }
    15. }
    16. return false;
    17. }
    18. // 如果没有被授予定位权限,动态向用户申请授权
    19. requestPermissions(): void {
    20. let atManager: abilityAccessCtrl.AtManager = abilityAccessCtrl.createAtManager();
    21. atManager.requestPermissionsFromUser(getContext() as common.UIAbilityContext, ['ohos.permission.LOCATION', 'ohos.permission.APPROXIMATELY_LOCATION'])
    22. .then((data: PermissionRequestResult) => {
    23. // 启用我的位置图层
    24. this.mapController?.setMyLocationEnabled(true);
    25. })
    26. .catch((err: BusinessError) => {
    27. console.error(`Failed to request permissions from user. Code is {err.code}, message is {err.message}`);
    28. })
    29. }
    30. async checkAccessToken(permission: Permissions): Promise<abilityAccessCtrl.GrantStatus> {
    31. let atManager: abilityAccessCtrl.AtManager = abilityAccessCtrl.createAtManager();
    32. let grantStatus: abilityAccessCtrl.GrantStatus = abilityAccessCtrl.GrantStatus.PERMISSION_DENIED;
    33. // 获取应用程序的accessTokenID
    34. let tokenId: number = 0;
    35. let bundleInfo: bundleManager.BundleInfo = await bundleManager.getBundleInfoForSelf(bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION);
    36. console.info('Succeeded in getting Bundle.');
    37. let appInfo: bundleManager.ApplicationInfo = bundleInfo.appInfo;
    38. tokenId = appInfo.accessTokenId;
    39. // 校验应用是否被授予权限
    40. grantStatus = await atManager.checkAccessToken(tokenId, permission);
    41. console.info('Succeeded in checking access token.');
    42. return grantStatus;
    43. }
  4. 检查"我的位置"功能是否成功启用。 "我的位置"按钮

    默认显示在地图的右下角。点击"我的位置"按钮

    ,将会在屏幕中心显示当前定位,以蓝色圆点的形式呈现,效果如下图所示,效果根据获取到的用户位置会有变化。

  5. 获取用户位置坐标并设置用户的位置。 Map Kit默认使用系统的连续定位能力,如果您希望定制显示频率或者精准度,可以调用geoLocationManager相关接口获取用户位置坐标(WGS84坐标系)。注意访问设备的位置信息必须申请权限,并且获得用户授权,详情见geoLocationManager

    下面的示例仅显示一次定位结果,在获取到用户坐标后,调用mapController对象的setMyLocation(location: geoLocationManager.Location)设置用户的位置。setMyLocation接口使用的是WGS84坐标系,如果需要将用户坐标用于其他接口,需将经纬度坐标转换成GCJ02坐标系,详见地图坐标系说明及转换

    复制代码
    1. // 需要引入@kit.LocationKit模块
    2. import { geoLocationManager } from '@kit.LocationKit';
    3. // ...
    4. // 获取用户位置坐标
    5. let location = await geoLocationManager.getCurrentLocation();
    6. // 设置用户的位置
    7. this.mapController.setMyLocation(location);

2. 监听"我的位置"按钮点击事件

通过调用mapController.on(type: 'myLocationButtonClick')方法,设置'myLocationButtonClick'事件监听。设置监听后"我的位置按钮"点击事件自定义,反之不设置则由Map Kit执行点击后默认事件,即地图移动到当前用户位置。

复制代码
  1. this.mapController.on("myLocationButtonClick", () => {
  2. console.info("myLocationButtonClick", `myLocationButtonClick`);
  3. });

3. 隐藏"我的位置"按钮

控制是否显示"我的位置"按钮。

复制代码
  1. this.mapController.setMyLocationControlsEnabled(false);

4. 自定义位置图标样式

通过调用mapController.setMyLocationStyle(style: mapCommon.MyLocationStyle)方法,设置用户位置图标样式。效果如下:

复制代码
  1. let style: mapCommon.MyLocationStyle = {
  2. anchorU: 0.5,
  3. anchorV: 0.5,
  4. radiusFillColor: 0xffff0000,
  5. // icon为自定义图标资源,使用时需要替换
  6. // 图标存放在resources/rawfile,icon参数传入rawfile文件夹下的相对路径
  7. icon: 'test.png'
  8. };
  9. await this.mapController.setMyLocationStyle(style);
相关推荐
funnycoffee12337 分钟前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为
制造数字化方案研究院39 分钟前
59页|PPT|华为集成服务交付ISD业务变革总体方案:业务规则、流程、IT、组织及度量“四位一体”的管理体系
运维·华为
博睿谷IT99_40 分钟前
华为物联网认证:开启万物互联的钥匙
物联网·华为·华为认证·职业规划
遇到困难睡大觉哈哈13 小时前
HarmonyOS 公共事件机制介绍以及多进程之间的通信实现(9000字详解)
华为·harmonyos
幽蓝计划16 小时前
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
开发语言·harmonyos
伍哥的传说16 小时前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
Georgewu18 小时前
【HarmonyOS】应用开发拖拽功能详解
harmonyos
塞尔维亚大汉18 小时前
鸿蒙内核源码分析(构建工具篇) | 顺瓜摸藤调试鸿蒙构建过程
源码·harmonyos
Fanmeang21 小时前
OSPF高级特性之FRR
运维·网络·华为·ip·ospf·spf·frr
kumalab21 小时前
HarmonyOS ArkTS卡片堆叠滑动组件实战与原理详解(含源码)
华为·harmonyos