【鸿蒙开发】Map Kit地图服务- 怎样在鸿蒙应用利用定位能力？ ...

一、华为地图开发准备工作

1. 设置 Client ID：
在完成基本准备及公钥指纹设置后，登录 AppGallery Connect（AGC） 平台获取目标应用的 Client ID（非项目的），并于工程 entry 模块的 module.json5 文件里，在 metadata 中新增设置，名称设为 client_id，值为所取 Client ID。

1. "module": {
2.   "name": "xxxx",
3.   "type": "entry",
4.   "description": "xxxx",
5.   "mainElement": "xxxx",
6.   "deviceTypes": [
7.     'phone',
8.     'tablet'
9.   ],
10.   "pages": "xxxx",
11.   "abilities": [],
12.   "metadata": [
13.     {
14.       "name": "client_id",
15.       "value": "xxxxxx"  // 配置为获取的Client ID
16.     }
17.   ]
18. }

复制代码

2. 开通地图服务：
登录 AGC 网站，选 “我的项目”，在项目下挑中需开地图服务的应用，经 API 管理寻地图服务开关开启，为地图开发筑牢根基，助开发者提升应用 LBS 体验、实现地图个性化呈现与交互。 

 二、表现地图

1.导入 Map Kit 模块

1. import { MapComponent, mapCommon, map } from '@kit.MapKit';
2. import { AsyncCallback } from '@kit.BasicServicesKit';

复制代码

2. 设 mapOptions 定地图中心及层级

1. @Entry
2. @Component
3. struct MapApp {
4.     // 地图初始化参数
5.     private mapOptions: mapCommon.MapOptions = {
6.         position: {
7.             target: {
8.                 latitude: 39.9,  // 地图中心纬度，可按需修改
9.                 longitude: 116.4  // 地图中心经度，可按需修改
10.             },
11.             zoom: 10  // 地图层级，可调整
12.         },
13.         // 可按需设置其他地图属性，如是否支持旋转手势等
14.         rotateGesturesEnabled: true,
15.         scrollGesturesEnabled: true,
16.         zoomGesturesEnabled: true,
17.         tiltGesturesEnabled: true,
18.         mapType: mapCommon.MapType.STANDARD,  // 地图类型，可切换
19.         myLocationControlsEnabled: false,  // 是否展示我的位置按钮，可设为 true 开启
20.         compassControlsEnabled: true,  // 是否展示指南针控件
21.         scaleControlsEnabled: false  // 是否展示比例尺，可设为 true 展示
22.     };

复制代码

 MapOptions包含以部属性
  属性
  描述
  mapType
  地图类型，默认值：MapType.STANDARD。
  position
  地图相机位置。
  bounds
  地图展示框。
  minZoom
  地图最小图层，有效范围[2, 20]，默认值：2。
  maxZoom
  地图最大图层，有效范围[2, 20]，默认值：20。
  rotateGesturesEnabled
  是否支持旋转手势，默认值：true。
  scrollGesturesEnabled
  是否支持滑动手势，默认值：true。
  zoomGesturesEnabled
  是否支持缩放手势，默认值：true。
  tiltGesturesEnabled
  是否支持倾斜手势，默认值：true。
  zoomControlsEnabled
  是否展示缩放控件，默认值：true。
  myLocationControlsEnabled
  是否展示我的位置按钮，默认值：false。
  compassControlsEnabled
  是否展示指南针控件，默认值：true。
  scaleControlsEnabled
  是否展示比例尺，默认值：false。
  alwaysShowScaleEnabled
  是否始终表现比例尺，默认值：false。
  padding
  设置地图和界限的间隔。
  styleId
  自定义样式ID。
  dayNightMode
  日间夜间模式，默认值：DayNightMode.DAY（日间模式）。
  3. 经 callback 取 MapComponentController

1.   private callback: AsyncCallback<map.MapComponentController> = () => {
3.   }
4.   private mapController?: map.MapComponentController
5.   private mapEventManager?: map.MapEventManager
7.   aboutToAppear() {
8.     this.callback = async (err, mapController) => {
9.       if (!err) {
10.         this.mapController = mapController;
11.         this.mapEventManager = this.mapController.getEventManager();
12.         let callback = () => {
13.           console.info("MapApp", `on-mapLoad`);
14.         };
15.         this.mapEventManager.on("mapLoad", callback);
16.       }
17.     };
18.   }

复制代码

4. 调 MapComponent 初始化地图以呈如今 APP

1.   onPageShow() {
2.     if (this.mapController) {
3.       this.mapController.show();
4.     }
5.   }
7.   onPageHide() {
8.     if (this.mapController) {
9.       this.mapController.hide();
10.     }
11.   }
13.   build() {
14.     Stack() {
15.       // 初始化地图组件
16.       MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback })
17.         .width('100%')
18.         .height('100%');
19.     }.height('100%')
20.   }

复制代码

三、获取我的位置

接口阐释：
MapComponentController 含多关键方法：

•  setMyLocationEnabled 控 “我的位置” 图层开关及表现效果；
  
• setMyLocationControlsEnabled 管按钮启用；
  
• setMyLocation 设位置坐标；
  
• setMyLocationStyle 定样式；
  
• on 与 off 分别监听、取消监听按钮点击事件，各方法依规则与参数精准操控功能细节。
  

1. 权限获取 + 功能启用：
依权限获取方式在适当时机调用 setMyLocationEnabled 与 setMyLocationControlsEnabled 激活功能，过程含权限校验、申请授权及状态处理逻辑链。
方式一用安全控件 LocationButton；
在 ArkUI 框架下创建一个按钮组件，用于触发安全控件 LocationButton 的点击事件以申请权限并开启地图与 “我的位置” 功能：

1. import { LocationButton, LocationButtonOptions, LocationIconStyle, LocationDescription, ButtonType, ClickEvent, LocationButtonOnClickResult } from '@ohos.security.components';
3. @Entry
4. @Component
5. struct MapLocationApp {
6.     build() {
7.         Column() {
8.             // 创建默认样式的 LocationButton 并监听点击事件
9.             LocationButton()
10.              .onClick((event: ClickEvent, result: LocationButtonOnClickResult) => {
11.                     console.info("点击结果: " + result);
12.                     if (result === LocationButtonOnClickResult.SUCCESS) {
13.                         // 在此处添加成功获取权限后开启地图及“我的位置”功能的代码
14.                         // 假设已获取到 mapController 实例
15.                         this.mapController.setMyLocationEnabled(true);
16.                         this.mapController.setMyLocationControlsEnabled(true);
17.                     } else if (result === LocationButtonOnClickResult.TEMPORARY_AUTHORIZATION_FAILED) {
18.                         console.error("位置权限授权失败");
19.                     }
20.                 })
21.             // 创建仅显示线条样式图标的 LocationButton
22.             LocationButton({ icon: LocationIconStyle.LINES })
23.             // 创建显示线条样式图标与胶囊背景的 LocationButton，并设置背景色（注意背景色高八位的α值限制）
24.             LocationButton({ icon: LocationIconStyle.LINES, buttonType: ButtonType.Capsule })
25.              .backgroundColor(0x10007dff)
26.             // 创建显示线条样式图标、“当前位置”文本与胶囊背景的 LocationButton，并设置字体大小与尺寸（处理文本换行与控件完整性）
27.             LocationButton({ icon: LocationIconStyle.LINES, text: LocationDescription.CURRENT_LOCATION, buttonType: ButtonType.Capsule })
28.              .fontSize(16)
29.              .width(30)
30.         }
31.     }
32. }

复制代码

方式二则在 module.json5 声明 ohos.permission.LOCATION 与 ohos.permission.APPROXIMATELY_LOCATION 权限后申请，且需精心设置权限理由及应用场景等。

1. {
2.   "module": {
3.     // 其他配置项...
4.     "requestPermissions":[
5.       {
6.         "name": "ohos.permission.LOCATION",
7.         "reason": "$string:location_permission",
8.         "usedScene": {
9.           "abilities": [
10.             "EntryAbility"
11.           ],
12.           "when":"inuse"
13.         }
14.       },
15.       {
16.         "name": "ohos.permission.APPROXIMATELY_LOCATION",
17.         "reason": "$string:approximately_location_permission",
18.         "usedScene": {
19.           "abilities": [
20.             "EntryAbility"
21.           ],
22.           "when":"inuse"
23.         }
24.       }
25.     ]
26.   }
27. }

复制代码

1. import { abilityAccessCtrl, bundleManager, common, PermissionRequestResult, Permissions } from '@kit.AbilityKit';
2. import { BusinessError } from '@kit.BasicServicesKit';
4. @Entry
5. @Component
6. struct MapLocationApp {
7.     // 假设已在其他地方获取到 MapComponentController 实例 mapController
8.     private mapController: MapComponentController;
10.     async checkPermissions(): Promise<boolean> {
11.         const permissions: Array<Permissions> = ['ohos.permission.LOCATION', 'ohos.permission.APPROXIMATELY_LOCATION'];
12.         for (let permission of permissions) {
13.             let grantStatus: abilityAccessCtrl.GrantStatus = await this.checkAccessToken(permission);
14.             if (grantStatus === abilityAccessCtrl.GrantStatus.PERMISSION_GRANTED) {
15.                 // 启用我的位置图层
16.                 this.mapController?.setMyLocationEnabled(true);
17.                 // 启用我的位置按钮
18.                 this.mapController?.setMyLocationControlsEnabled(true);
19.                 return true;
20.             }
21.         }
22.         return false;
23.     }
25.     requestPermissions(): void {
26.         let atManager: abilityAccessCtrl.AtManager = abilityAccessCtrl.createAtManager();
27.         atManager.requestPermissionsFromUser(getContext() as common.UIAbilityContext, ['ohos.permission.LOCATION', 'ohos.permission.APPROXIMATELY_LOCATION'])
28.           .then((data: PermissionRequestResult) => {
29.                 // 启用我的位置图层
30.                 this.mapController?.setMyLocationEnabled(true);
31.             })
32.           .catch((err: BusinessError) => {
33.                 console.error(`Failed to request permissions from user. Code is ${err.code}, message is ${err.message}`);
34.             })
35.     }
37.     async checkAccessToken(permission: Permissions): Promise<abilityAccessCtrl.GrantStatus> {
38.         let atManager: abilityAccessCtrl.AtManager = abilityAccessCtrl.createAtManager();
39.         let grantStatus: abilityAccessCtrl.GrantStatus = abilityAccessCtrl.GrantStatus.PERMISSION_DENIED;
40.         // 获取应用程序的 accessTokenID
41.         let tokenId: number = 0;
42.         let bundleInfo: bundleManager.BundleInfo = await bundleManager.getBundleInfoForSelf(bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION);
43.         console.info('Succeeded in getting Bundle.');
44.         let appInfo: bundleManager.ApplicationInfo = bundleInfo.appInfo;
45.         tokenId = appInfo.accessTokenId;
46.         // 校验应用是否被授予权限
47.         grantStatus = await atManager.checkAccessToken(tokenId, permission);
48.         console.info('Succeeded in checking access token.');
49.         return grantStatus;
50.     }
52.     build() {
53.         Column() {
54.             Button('检查并申请权限')
55.               .onClick(() => {
56.                     if (!this.checkPermissions()) {
57.                         this.requestPermissions();
58.                     }
59.                 })
60.         }
61.     }
62. }

复制代码

2. 功能检查与拓展操作：
查功能启用状态看按钮及定位表现；
借 geoLocationManager 接口获坐标设位置，留意坐标系转换；

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

复制代码

用 on 方法监听按钮点击事件，定制交互；

1. let callback = () => {
2.   console.info("myLocationButtonClick", `myLocationButtonClick`);
3. };
4. this.mapEventManager.on("myLocationButtonClick", callback);

复制代码

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

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。