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

前言

在开发运动类应用时，集成地图功能以及实时记录运动轨迹和公里数是核心需求之一。本文将详细介绍如何在 HarmonyOS 应用中集成百度地图 SDK，实现运动跟随以及运动公里数的记录。

一、集成百度地图 SDK

1.引入依赖

首先，需要在项目的文件中引入百度地图相关的依赖包：

"dependencies": {"@bdmap/base": "1.2.6","@bdmap/search": "1.2.6","@bdmap/map": "1.2.6","@bdmap/locsdk": "1.1.4"
}

2.初始化百度地图

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

MapUtil 类


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

LocManager 类


export class LocManager {private client: LocationClient | null = null;private static instance: LocManager;public static getInstance(): LocManager {if (!LocManager.instance) {LocManager.instance = new LocManager();}return LocManager.instance;}constructor() {}init(context: Context) {if (this.client == null) {try {this.client = new LocationClient(context);} catch (error) {console.error("harmony_baidu_location error: " + error.message);}}if (this.client != null) {this.client.setLocOption(this.getDefaultLocationOption());}}start() {if (this.client != null) {this.client.start();}}stop() {if (this.client != null) {this.client.stop();}}requestSingleLocation() {if (this.client != null) {this.client.requestSingleLocation();}}registerListener(listener: BDLocationListener): boolean {let isSuccess: boolean = false;if (this.client != null && listener != null) {this.client.registerLocationListener(listener);isSuccess = true;}return isSuccess;}unRegisterListener(listener: BDLocationListener) {if (this.client != null && listener != null) {this.client.unRegisterLocationListener(listener);}}getSDKVersion(): string {let version: string = "";if (this.client != null) {version = this.client.getVersion();}return version;}enableLocInBackground(wantAgent: WantAgent) {if (this.client != null) {this.client.enableLocInBackground(wantAgent);}}disableLocInBackground() {if (this.client != null) {this.client.disableLocInBackground();}}getDefaultLocationOption() {let option = new LocationClientOption();option.setCoorType("bd09ll"); // 可选，默认为gcj02，设置返回的定位结果坐标系option.setTimeInterval(3); // 可选，默认1秒，设置连续定位请求的时间间隔option.setDistanceInterval(0); // 可选，默认0米，设置连续定位的距离间隔option.setIsNeedAddress(true); // 可选，设置是否需要地址信息，默认不需要option.setIsNeedLocationDescribe(true); // 可选，默认为false，设置是否需要地址描述option.setIsNeedLocationPoiList(true); // 可选，默认能为false，设置是否需要POI结果option.setLocationMode(LocationMode.High_Accuracy); // 可选，默认高精度，设置定位模式，高精度、低功耗、仅设备option.setSingleLocatingTimeout(3000); // 可选，仅针对单次定位生效，设置单次定位的超时时间return option;}}

3.定位监听器

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


export class MapLocationListener extends BDLocationListener {private callback: (location: BDLocation) => void;constructor(callback: (location: BDLocation) => void) {super();this.callback = callback;}onReceiveLocation(bdLocation: BDLocation): void {this.callback(bdLocation);}
}

二、页面使用

1.权限申请

在文件中声明所需的权限：

"requestPermissions": [{"name": "ohos.permission.LOCATION","reason": "$string:location_permission","usedScene": {"abilities": ["EntryAbility"],"when": "inuse"}},{"name": "ohos.permission.LOCATION_IN_BACKGROUND","reason": "$string:background_location_permission","usedScene": {"abilities": ["EntryAbility"],"when": "inuse"}},{"name": "ohos.permission.APPROXIMATELY_LOCATION","reason": "$string:fuzzy_location_permission","usedScene": {"abilities": ["EntryAbility"],"when": "inuse"}},{"name": "ohos.permission.APP_TRACKING_CONSENT","reason": "$string:get_oaid_permission","usedScene": {"abilities": ["EntryAbility"],"when": "inuse"}},{"name": "ohos.permission.KEEP_BACKGROUND_RUNNING","reason": "$string:keep_background_running_permission","usedScene": {"abilities": ["EntryAbility1"],"when": "inuse"}}]

2.请求权限

在页面中请求权限：

private async requestPermissions(): Promise<boolean> {const permissions : Permissions[]= ['ohos.permission.LOCATION','ohos.permission.APPROXIMATELY_LOCATION','ohos.permission.APP_TRACKING_CONSENT',]return LibPermission.requestPermissions(permissions)}

3.页面调用

方向感应

使用鸿蒙系统自带的方向传感器来获取设备的朝向角度：

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

编写定位监听器

private mListener: MapLocationListener = new MapLocationListener((bdLocation: BDLocation) => {this.currentLatitude = bdLocation.getLatitude();this.currentLongitude = bdLocation.getLongitude();this.currentRadius = bdLocation.getRadius();// 更新地图位置和位置标记if (this.mapController) {// 更新地图中心点this.mapController.setMapCenter({lat: this.currentLatitude,lng: this.currentLongitude},15);if(this.loc){// 设置定位图标位置、指向以及范围this.loc.location = new LatLng(this.currentLatitude, this.currentLongitude);this.loc.direction = this.currentRotation;// 单位米this.loc.radius = 0;}}});

启动和关闭定位

// 启动定位
LocManager.getInstance().registerListener(this.mListener);
LocManager.getInstance().start();// 关闭定位
LocManager.getInstance().unRegisterListener(this.mListener);
LocManager.getInstance().stop();

百度地图集成

在页面中集成百度地图：

MapComponent({ onReady: async (err, mapController:MapController) => {if (!err) {// 获取地图的控制器类，用来操作地图this.mapController= mapController;let result = this.mapController.getLayerByTag(SysEnum.LayerTag.LOCATION);if(result){this.loc = result as LocationLayer;}if(this.currentLatitude!=0&&this.currentLongitude!=0){if(this.loc){// 设置定位图标位置、指向以及范围this.loc.location = new LatLng(this.currentLatitude, this.currentLongitude);this.loc.direction = this.currentRotation;// 单位米this.loc.radius = 0;}this.mapController.setMapCenter({lat: this.currentLatitude,lng: this.currentLongitude},15);}}}, mapOptions: this.mapOpt }).width('100%').height('100%')

三、公里数计算

在运动应用中，记录用户的运动轨迹并计算运动的总距离是核心功能之一。为了实现这一功能，我们需要设计一个数据模型来记录运动轨迹点，并通过这些点计算总距离。

1.运动轨迹点模型

定义一个RunPoint类来表示运动轨迹中的一个点，包含纬度、经度和时间戳：

/*** 运动轨迹点数据模型*/
export class RunPoint {// 纬度latitude: number;// 经度longitude: number;// 时间戳timestamp: number;// 所属公里数分组(第几公里)kilometerGroup: number;constructor(latitude: number, longitude: number) {this.latitude = latitude;this.longitude = longitude;this.timestamp = Date.now();this.kilometerGroup = 0; // 默认分组为0}
}

2.运动轨迹管理类

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


/*** 运动轨迹管理类*/
export class RunTracker {// 所有轨迹点private points: RunPoint[] = [];// 当前总距离（公里）private totalDistance: number = 0;// 当前公里数分组private currentKilometerGroup: number = 0;/*** 添加新的轨迹点* @param latitude 纬度* @param longitude 经度* @returns 当前总距离（公里）*/addPoint(latitude: number, longitude: number): number {const point = new RunPoint(latitude, longitude);if (this.points.length > 0) {// 计算与上一个点的距离const lastPoint = this.points[this.points.length - 1];const distance = this.calculateDistance(lastPoint, point);this.totalDistance += distance;// 更新公里数分组point.kilometerGroup = Math.floor(this.totalDistance);if (point.kilometerGroup > this.currentKilometerGroup) {this.currentKilometerGroup = point.kilometerGroup;}}this.points.push(point);return this.totalDistance;}/*** 计算两点之间的距离（公里）* 使用Haversine公式计算球面距离*/private calculateDistance(point1: RunPoint, point2: RunPoint): number {const R = 6371; // 地球半径（公里）const lat1 = this.toRadians(point1.latitude);const lat2 = this.toRadians(point2.latitude);const deltaLat = this.toRadians(point2.latitude - point1.latitude);const deltaLon = this.toRadians(point2.longitude - point1.longitude);const a = Math.sin(deltaLat / 2) * Math.sin(deltaLat / 2) +Math.cos(lat1) * Math.cos(lat2) *Math.sin(deltaLon / 2) * Math.sin(deltaLon / 2);const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));return R * c;}/*** 将角度转换为弧度*/private toRadians(degrees: number): number {return degrees * (Math.PI / 180);}/*** 获取当前总距离*/getTotalDistance(): number {return this.totalDistance;}/*** 获取指定公里数分组的轨迹点*/getPointsByKilometer(kilometer: number): RunPoint[] {return this.points.filter(point => point.kilometerGroup === kilometer);}/*** 清空轨迹数据*/clear(): void {this.points = [];this.totalDistance = 0;this.currentKilometerGroup = 0;}
}

3.页面的监听器里记录公里数

在页面中使用RunTracker类来记录运动轨迹点并计算总距离：

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

四、总结

本文详细介绍了如何在 HarmonyOS 应用中集成百度地图 SDK，实现运动跟随以及运动公里数的记录。通过以下步骤，我们可以实现一个功能完整的运动应用：

• 集成百度地图 SDK：

• 引入必要的依赖包。

• 初始化百度地图并设置定位选项。

• 页面使用：

• 请求必要的权限。

• 启动和关闭定位。

• 实时更新地图位置和方向。

• 公里数计算：

• 定义运动轨迹点模型。

• 使用 Haversine 公式计算两点之间的距离。