华为地图服务 - 如何开启和展示“我的位置”？ -- 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);