HarmonyOS运动开发：如何集成百度地图SDK、运动跟随与运动公里数记录

前言
在开发运动类应用时，集成地图功能以及实时记录运动轨迹和公里数是核心需求之一。本文将详细介绍如何在 HarmonyOS 应用中集成百度地图 SDK，实现运动跟随以及运动公里数的记录。
一、集成百度地图 SDK
1.引入依赖
首先，需要在项目的文件中引入百度地图相关的依赖包：

1. "dependencies": {
2.   "@bdmap/base": "1.2.6",
3.   "@bdmap/search": "1.2.6",
4.   "@bdmap/map": "1.2.6",
5.   "@bdmap/locsdk": "1.1.4"
6. }

复制代码

2.初始化百度地图
为了使用百度地图的功能，我们需要进行初始化操作。这包括设置 API Key 和初始化定位客户端。
MapUtil 类

1. export class MapUtil{
3.   public static initialize(context:Context){
4.     Initializer.getInstance().initialize("你的key");
5.     // 设置是否同意隐私合规政策接口
6.     // true，表示同意隐私合规政策
7.     // false，表示不同意隐私合规政策
8.     LocationClient.checkAuthKey("你的key", (result: string) => {
9.       console.debug("result = " + result); // 可打印出是否鉴权成功的结果
10.     });
11.     LocationClient.setAgreePrivacy(true);
12.     LocManager.getInstance().init(context);
13.   }
15. }

复制代码

LocManager 类

1. export class LocManager {
2.   private client: LocationClient | null = null;
4.   private static instance: LocManager;
6.   public static getInstance(): LocManager {
7.     if (!LocManager.instance) {
8.       LocManager.instance = new LocManager();
9.     }
10.     return LocManager.instance;
11.   }
13.   constructor() {
15.   }
17.   init(context: Context) {
18.     if (this.client == null) {
19.       try {
20.         this.client = new LocationClient(context);
21.       } catch (error) {
22.         console.error("harmony_baidu_location error: " + error.message);
23.       }
24.     }
25.     if (this.client != null) {
26.       this.client.setLocOption(this.getDefaultLocationOption());
27.     }
28.   }
30.   start() {
31.     if (this.client != null) {
32.       this.client.start();
33.     }
34.   }
36.   stop() {
37.     if (this.client != null) {
38.       this.client.stop();
39.     }
40.   }
42.   requestSingleLocation() {
43.     if (this.client != null) {
44.       this.client.requestSingleLocation();
45.     }
46.   }
48.   registerListener(listener: BDLocationListener): boolean {
49.     let isSuccess: boolean = false;
50.     if (this.client != null && listener != null) {
51.       this.client.registerLocationListener(listener);
52.       isSuccess = true;
53.     }
54.     return isSuccess;
55.   }
57.   unRegisterListener(listener: BDLocationListener) {
58.     if (this.client != null && listener != null) {
59.       this.client.unRegisterLocationListener(listener);
60.     }
61.   }
63.   getSDKVersion(): string {
64.     let version: string = "";
65.     if (this.client != null) {
66.       version = this.client.getVersion();
67.     }
68.     return version;
69.   }
71.   enableLocInBackground(wantAgent: WantAgent) {
72.     if (this.client != null) {
73.       this.client.enableLocInBackground(wantAgent);
74.     }
75.   }
77.   disableLocInBackground() {
78.     if (this.client != null) {
79.       this.client.disableLocInBackground();
80.     }
81.   }
83.   getDefaultLocationOption() {
84.     let option = new LocationClientOption();
85.     option.setCoorType("bd09ll"); // 可选，默认为gcj02，设置返回的定位结果坐标系
86.     option.setTimeInterval(3); // 可选，默认1秒，设置连续定位请求的时间间隔
87.     option.setDistanceInterval(0); // 可选，默认0米，设置连续定位的距离间隔
88.     option.setIsNeedAddress(true); // 可选，设置是否需要地址信息，默认不需要
89.     option.setIsNeedLocationDescribe(true); // 可选，默认为false，设置是否需要地址描述
90.     option.setIsNeedLocationPoiList(true); // 可选，默认能为false，设置是否需要POI结果
91.     option.setLocationMode(LocationMode.High_Accuracy); // 可选，默认高精度，设置定位模式，高精度、低功耗、仅设备
92.     option.setSingleLocatingTimeout(3000); // 可选，仅针对单次定位生效，设置单次定位的超时时间
94.     return option;
95.   }
97. }

复制代码

3.定位监听器
为了处理定位数据，我们需要实现一个定位监听器：

1. export class MapLocationListener extends BDLocationListener {
2.   private callback: (location: BDLocation) => void;
4.   constructor(callback: (location: BDLocation) => void) {
5.     super();
6.     this.callback = callback;
7.   }
9.   onReceiveLocation(bdLocation: BDLocation): void {
10.     this.callback(bdLocation);
11.   }
12. }

复制代码

二、页面使用
1.权限申请
在文件中声明所需的权限：

1. "requestPermissions": [
2.       {
3.         "name": "ohos.permission.LOCATION",
4.         "reason": "$string:location_permission",
5.         "usedScene": {
6.           "abilities": [
7.             "EntryAbility"
8.           ],
9.           "when": "inuse"
10.         }
11.       },
12.       {
13.         "name": "ohos.permission.LOCATION_IN_BACKGROUND",
14.         "reason": "$string:background_location_permission",
15.         "usedScene": {
16.           "abilities": [
17.             "EntryAbility"
18.           ],
19.           "when": "inuse"
20.         }
21.       },
22.       {
23.         "name": "ohos.permission.APPROXIMATELY_LOCATION",
24.         "reason": "$string:fuzzy_location_permission",
25.         "usedScene": {
26.           "abilities": [
27.             "EntryAbility"
28.           ],
29.           "when": "inuse"
30.         }
31.       },
32.       {
33.         "name": "ohos.permission.APP_TRACKING_CONSENT",
34.         "reason": "$string:get_oaid_permission",
35.         "usedScene": {
36.           "abilities": [
37.             "EntryAbility"
38.           ],
39.           "when": "inuse"
40.         }
41.       },
42.       {
43.         "name": "ohos.permission.KEEP_BACKGROUND_RUNNING",
44.         "reason": "$string:keep_background_running_permission",
45.         "usedScene": {
46.           "abilities": [
47.             "EntryAbility1"
48.           ],
49.           "when": "inuse"
50.         }
51.       }
52.     ]

复制代码

2.请求权限
在页面中请求权限：

1. private async requestPermissions(): Promise<boolean> {
2.     const permissions : Permissions[]= [
3.       'ohos.permission.LOCATION',
4.       'ohos.permission.APPROXIMATELY_LOCATION',
5.       'ohos.permission.APP_TRACKING_CONSENT',
6.     ]
7.     return LibPermission.requestPermissions(permissions)
8.   }

复制代码

3.页面调用
方向感应
使用鸿蒙系统自带的方向传感器来获取设备的朝向角度：

1. // 初始化方向传感器
2.       sensor.on(sensor.SensorId.ORIENTATION, (data) => {
3.         // 获取设备朝向角度（绕Z轴旋转角度）
4.         this.currentRotation = data.alpha;
5.         if(this.loc){
6.           this.loc.location = new LatLng(this.currentLatitude, this.currentLongitude);
7.           this.loc.direction = this.currentRotation;
8.           this.loc.radius = 0;
9.         }
10.       });
12. // 用完记得取消监听
13. sensor.off(sensor.SensorId.ORIENTATION);

复制代码

编写定位监听器

1. private mListener: MapLocationListener = new MapLocationListener((bdLocation: BDLocation) => {
2.     this.currentLatitude = bdLocation.getLatitude();
3.     this.currentLongitude = bdLocation.getLongitude();
4.     this.currentRadius = bdLocation.getRadius();
6.     // 更新地图位置和位置标记
7.     if (this.mapController) {
8.       // 更新地图中心点
9.       this.mapController.setMapCenter({
10.         lat: this.currentLatitude,
11.         lng: this.currentLongitude
12.       },15);
14.       if(this.loc){
15.         // 设置定位图标位置、指向以及范围
16.         this.loc.location = new LatLng(this.currentLatitude, this.currentLongitude);
17.         this.loc.direction = this.currentRotation;
18.         // 单位米
19.         this.loc.radius = 0;
21.       }
23.     }
24.   });

复制代码

启动和关闭定位

1. // 启动定位
2. LocManager.getInstance().registerListener(this.mListener);
3. LocManager.getInstance().start();
5. // 关闭定位
6. LocManager.getInstance().unRegisterListener(this.mListener);
7. LocManager.getInstance().stop();

复制代码

百度地图集成
在页面中集成百度地图：

1. MapComponent({ onReady: async (err, mapController:MapController) => {
2.           if (!err) {
3.             // 获取地图的控制器类，用来操作地图
4.             this.mapController= mapController;
5.             let result = this.mapController.getLayerByTag(SysEnum.LayerTag.LOCATION);
6.             if(result){
7.               this.loc = result as LocationLayer;
8.             }
10.             if(this.currentLatitude!=0&&this.currentLongitude!=0){
11.               if(this.loc){
12.                 // 设置定位图标位置、指向以及范围
13.                 this.loc.location = new LatLng(this.currentLatitude, this.currentLongitude);
14.                 this.loc.direction = this.currentRotation;
15.                 // 单位米
16.                 this.loc.radius = 0;
17.               }
19.               this.mapController.setMapCenter({
20.                 lat: this.currentLatitude,
21.                 lng: this.currentLongitude
22.               },15);
24.             }
25.           }
26.         }, mapOptions: this.mapOpt }).width('100%').height('100%')

复制代码

三、公里数计算
在运动应用中，记录用户的运动轨迹并计算运动的总距离是核心功能之一。为了实现这一功能，我们需要设计一个数据模型来记录运动轨迹点，并通过这些点计算总距离。
1.运动轨迹点模型
定义一个RunPoint类来表示运动轨迹中的一个点，包含纬度、经度和时间戳：

1. /**
2. * 运动轨迹点数据模型
3. */
4. export class RunPoint {
5.   // 纬度
6.   latitude: number;
7.   // 经度
8.   longitude: number;
9.   // 时间戳
10.   timestamp: number;
11.   // 所属公里数分组(第几公里)
12.   kilometerGroup: number;
14.   constructor(latitude: number, longitude: number) {
15.     this.latitude = latitude;
16.     this.longitude = longitude;
17.     this.timestamp = Date.now();
18.     this.kilometerGroup = 0; // 默认分组为0
19.   }
20. }

复制代码

2.运动轨迹管理类
创建一个RunTracker类来管理运动轨迹点，并计算总距离：

1. /**
2. * 运动轨迹管理类
3. */
4. export class RunTracker {
5.   // 所有轨迹点
6.   private points: RunPoint[] = [];
7.   // 当前总距离（公里）
8.   private totalDistance: number = 0;
9.   // 当前公里数分组
10.   private currentKilometerGroup: number = 0;
12.   /**
13.    * 添加新的轨迹点
14.    * @param latitude 纬度
15.    * @param longitude 经度
16.    * @returns 当前总距离（公里）
17.    */
18.   addPoint(latitude: number, longitude: number): number {
19.     const point = new RunPoint(latitude, longitude);
21.     if (this.points.length > 0) {
22.       // 计算与上一个点的距离
23.       const lastPoint = this.points[this.points.length - 1];
24.       const distance = this.calculateDistance(lastPoint, point);
25.       this.totalDistance += distance;
27.       // 更新公里数分组
28.       point.kilometerGroup = Math.floor(this.totalDistance);
29.       if (point.kilometerGroup > this.currentKilometerGroup) {
30.         this.currentKilometerGroup = point.kilometerGroup;
31.       }
32.     }
34.     this.points.push(point);
35.     return this.totalDistance;
36.   }
38.   /**
39.    * 计算两点之间的距离（公里）
40.    * 使用Haversine公式计算球面距离
41.    */
42.   private calculateDistance(point1: RunPoint, point2: RunPoint): number {
43.     const R = 6371; // 地球半径（公里）
44.     const lat1 = this.toRadians(point1.latitude);
45.     const lat2 = this.toRadians(point2.latitude);
46.     const deltaLat = this.toRadians(point2.latitude - point1.latitude);
47.     const deltaLon = this.toRadians(point2.longitude - point1.longitude);
49.     const a = Math.sin(deltaLat / 2) * Math.sin(deltaLat / 2) +
50.               Math.cos(lat1) * Math.cos(lat2) *
51.               Math.sin(deltaLon / 2) * Math.sin(deltaLon / 2);
52.     const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
54.     return R * c;
55.   }
57.   /**
58.    * 将角度转换为弧度
59.    */
60.   private toRadians(degrees: number): number {
61.     return degrees * (Math.PI / 180);
62.   }
64.   /**
65.    * 获取当前总距离
66.    */
67.   getTotalDistance(): number {
68.     return this.totalDistance;
69.   }
71.   /**
72.    * 获取指定公里数分组的轨迹点
73.    */
74.   getPointsByKilometer(kilometer: number): RunPoint[] {
75.     return this.points.filter(point => point.kilometerGroup === kilometer);
76.   }
78.   /**
79.    * 清空轨迹数据
80.    */
81.   clear(): void {
82.     this.points = [];
83.     this.totalDistance = 0;
84.     this.currentKilometerGroup = 0;
85.   }
86. }

复制代码

3.页面的监听器里记录公里数
在页面中使用RunTracker类来记录运动轨迹点并计算总距离：

1.   private runTracker: RunTracker = new RunTracker();
2. 监听器添加代码
3.       const distance = this.runTracker.addPoint(this.currentLatitude, this.currentLongitude);
5. distance就是当前运动的公里数

复制代码

四、总结
本文详细介绍了如何在 HarmonyOS 应用中集成百度地图 SDK，实现运动跟随以及运动公里数的记录。通过以下步骤，我们可以实现一个功能完整的运动应用：
• 集成百度地图 SDK：
• 引入必要的依赖包。
• 初始化百度地图并设置定位选项。
• 页面使用：
• 请求必要的权限。
• 启动和关闭定位。
• 实时更新地图位置和方向。
• 公里数计算：
• 定义运动轨迹点模型。
• 使用 Haversine 公式计算两点之间的距离。
• 记录运动轨迹点并实时更新总距离。
通过这些步骤，开发者可以轻松实现一个功能强大的运动应用，为用户提供实时的运动数据和地图跟随功能。希望本文的内容能够帮助你在 HarmonyOS 开发中取得更好的成果！

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！