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

启用"我的位置"之前，您需要确保您的应用可以获取用户定位。获取用户定位有两种方式：方式一（推荐）：使用安全控件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. }
初始化地图并获取MapComponentController地图操作类对象。显示地图章节中有详细讲解。
调用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. }
检查"我的位置"功能是否成功启用。 "我的位置"按钮

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

，将会在屏幕中心显示当前定位，以蓝色圆点的形式呈现，效果如下图所示，效果根据获取到的用户位置会有变化。
获取用户位置坐标并设置用户的位置。 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执行点击后默认事件，即地图移动到当前用户位置。

复制代码

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