华为HarmonyOS地图服务 3 - 如何开启和展示“我的位置”？

一. 场景介绍

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

二. 接口说明

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

三. 开发步骤

1. 开启“我的位置”按钮

1. 启用“我的位置”之前，您需要确保您的应用可以获取用户定位。获取用户定位有两种方式：

   方式一（推荐）：使用安全控件LocationButton。

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

   {
   "module" : {
   // ...
   "requestPermissions":[
   {
   // 允许应用在前台运行时获取位置信息
   "name" : "ohos.permission.LOCATION",
   // reason需要在/resources/base/element/string.json中新建
   "reason": "$string:location_permission",
   "usedScene": {
   "abilities": [
   "EntryAbility"
   ],
   "when":"inuse"
   }
   },
   {
   // 允许应用获取设备模糊位置信息
   "name" : "ohos.permission.APPROXIMATELY_LOCATION",
   // reason需要在/resources/base/element/string.json中新建
   "reason": "$string:approximately_location_permission",
   "usedScene": {
   "abilities": [
   "EntryAbility"
   ],
   "when":"inuse"
   }
   }
   ]
   }
   }

2. 初始化地图并获取MapComponentController地图操作类对象。显示地图章节中有详细讲解。
3. 调用mapController对象的setMyLocationEnabled方法启用“我的位置”功能。

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

   // 启用我的位置图层
   this.mapController.setMyLocationEnabled(   
   true
   
      );
   // 启用我的位置按钮
   this.mapController.setMyLocationControlsEnabled(   
   true
   
      );

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

   ​
   import { abilityAccessCtrl, bundleManager, common, PermissionRequestResult, Permissions } from '@kit.AbilityKit';
   import { BusinessError } from '@kit.BasicServicesKit';
   // 校验应用是否被授予定位权限，可以通过调用checkAccessToken()方法来校验当前是否已经授权。
   async checkPermissions(): Promise<boolean> {
   const permissions: Array<Permissions> = ['ohos.permission.LOCATION', 'ohos.permission.APPROXIMATELY_LOCATION'];
   for (let permission of permissions) {
   let grantStatus: abilityAccessCtrl.GrantStatus = await this.checkAccessToken(permission);
   if (grantStatus === abilityAccessCtrl.GrantStatus.PERMISSION_GRANTED) {
   // 启用我的位置图层，mapController为地图操作类对象，获取方式详见显示地图章节
   this.mapController?.setMyLocationEnabled(true);
   // 启用我的位置按钮
   this.mapController?.setMyLocationControlsEnabled(true);
   return true;
   }
   }
   return false;
   }
   // 如果没有被授予定位权限，动态向用户申请授权
   requestPermissions(): void {
   let atManager: abilityAccessCtrl.AtManager = abilityAccessCtrl.createAtManager();
   atManager.requestPermissionsFromUser(getContext() as common.UIAbilityContext, ['ohos.permission.LOCATION', 'ohos.permission.APPROXIMATELY_LOCATION'])
   .then((data: PermissionRequestResult) => {
   // 启用我的位置图层
   this.mapController?.setMyLocationEnabled(true);
   })
   .catch((err: BusinessError) => {
   console.error(`Failed to request permissions from user. Code is ${err.code}, message is ${err.message}`);
   })
   }
   async checkAccessToken(permission: Permissions): Promise<abilityAccessCtrl.GrantStatus> {
   let atManager: abilityAccessCtrl.AtManager = abilityAccessCtrl.createAtManager();
   let grantStatus: abilityAccessCtrl.GrantStatus = abilityAccessCtrl.GrantStatus.PERMISSION_DENIED;
   // 获取应用程序的accessTokenID
   let tokenId: number = 0;
   let bundleInfo: bundleManager.BundleInfo = await bundleManager.getBundleInfoForSelf(bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION);
   console.info('Succeeded in getting Bundle.');
   let appInfo: bundleManager.ApplicationInfo = bundleInfo.appInfo;
   tokenId = appInfo.accessTokenId;
   // 校验应用是否被授予权限
   grantStatus = await atManager.checkAccessToken(tokenId, permission);
   console.info('Succeeded in checking access token.');
   return grantStatus;
   }
   ​

4. 检查“我的位置”功能是否成功启用。

   “我的位置”按钮

   

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

   

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

   

5. 获取用户位置坐标并设置用户的位置。

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

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

   // 需要引入@kit.LocationKit模块
   import { geoLocationManager } from '@kit.LocationKit';
   // ...
   // 获取用户位置坐标
   let location = await geoLocationManager.getCurrentLocation();
   // 设置用户的位置
   this.mapController.setMyLocation(location);

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

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

this.mapController.on("myLocationButtonClick", () => {
console.info("myLocationButtonClick", `myLocationButtonClick`);
});

3. 隐藏“我的位置”按钮

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

this.mapController.setMyLocationControlsEnabled(false);

4. 自定义位置图标样式

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

let style: mapCommon.MyLocationStyle = {
anchorU: 0.5,
anchorV: 0.5,
radiusFillColor: 0xffff0000,
// icon为自定义图标资源，使用时需要替换
// 图标存放在resources/rawfile，icon参数传入rawfile文件夹下的相对路径
icon: 'test.png'
};
await this.mapController.setMyLocationStyle(style);