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

大家好，欢迎来到IT知识分享网。

一. 场景介绍

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

二. 接口说明

“我的位置”功能主要由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);