自学内容网 自学内容网

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

一. 场景介绍

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

cke_3520.png

二. 接口说明

“我的位置”功能主要由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. 检查“我的位置”功能是否成功启用。

    “我的位置”按钮

    cke_20444.png

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

    cke_23581.png

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

    cke_8884.png

  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);

cke_13227.png


原文地址:https://blog.csdn.net/pisceshsu/article/details/142300692

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!