“跑步运动助手”微信小程序轨迹回放功能实现原理与开发实践

小蝇工作室

已于 2025-04-30 16:14:51 修改

阅读量361

点赞数 16

文章标签：微信小程序跑步轨迹地图 uniapp 跑步运动助手

于 2025-04-30 16:11:32 首次发布

本文链接：https://blog.csdn.net/u014791094/article/details/147634947

版权

一、前言

在现代运动健康应用中，轨迹回放是一项非常实用的功能，它能够让用户直观地回顾自己的运动路线、速度变化等信息。本文将深入分析一个基于腾讯地图API实现的跑步轨迹回放功能，解析其工作原理和具体实现方式。

跑步轨迹回放

二、功能概述

该跑步轨迹回放功能主要实现以下特性：

从服务器获取GPS轨迹数据
在地图上绘制完整的运动轨迹
使用动画方式回放运动过程
实时显示运动数据（配速、里程、时间）
轨迹颜色根据速度变化（红-黄-绿渐变）
终点显示二维码推广信息

三、核心实现原理

1. 数据获取与处理

轨迹数据通过AJAX请求从服务器获取：

$.ajax({
    url: '你的api接口',
    type: 'get',
    data: { id: id },
    success: function(result) {
        // 处理返回的轨迹数据
        var points = JSON.parse(result.data[0][8])[0].points;
        // 其他数据处理...
    }
});

获取到的数据包含每个轨迹点的经纬度、速度等信息。这些数据会被处理成腾讯地图API需要的格式：

paths.forEach((i) => {
    markerData.push(new TMap.LatLng(i.latitude, i.longitude));
    path.push([i.latitude, i.longitude]);
    
    // 根据速度设置颜色偏移值
    var ps = toPsNum(covertSpeed(i.speed));
    if(ps <7){
        colorOffset.push(0.99)  // 红色
    }else if(ps >= 7 && ps <8){
        colorOffset.push(0.5)   // 黄色
    }else if(ps >= 8){
        colorOffset.push(0.01)  // 绿色
    }
});

2. 地图初始化

使用腾讯地图API初始化地图：

var map = new TMap.Map("container", {
    zoom: 17,
    pitch: 50,
    mapStyleId: 'style4',
    baseMap: {
        type: "satellite",
        features: ["base", "building3d"],
    },
    center,  // 初始中心点
});

3. 轨迹绘制与动画

轨迹绘制使用腾讯地图的MultiMarker和Trail组件：

// 初始化marker
marker = new TMap.MultiMarker({
    id: "whiteDot",
    map,
    styles: {
        "whiteDot": new TMap.MarkerStyle({
            width: 25,
            height: 25,
            anchor: { x: 14.5, y: 14.5 },
            faceTo: "map",
            rotate: 180,
            src: "https://mapapi.qq.com/web/lbs/visualizationApi/demo/img/white.png",
        }),
        // 其他样式...
    },
    geometries: [
        { id: "whiteDot", styleId: "whiteDot", position: startPoint },
        { id: "start", styleId: "start", position: startPoint },
    ],
});

// 初始化轨迹图
trail = new TMap.visualization.Trail({
    pickStyle: function(item) {
        return {
            width: 6,
            color: new TMap.GradientColor({
                stops: {
                    0.01: "#f45e0c",  // 红色
                    0.5: "#f6cd0e",   // 黄色
                    0.99: "#2ad61d",   // 绿色
                },
            }),
        };
    },
    showDuration: Infinity,
    playTimes: 1,
    playRate: 90,  // 动画播放倍速
    enableColorOffset: true
}).addTo(map);

4. 动画控制

动画通过moveAlong方法实现：

function carMove() {
    marker.moveAlong({
        whiteDot: {
            path: markerData,
            speed: 324, // 速度 单位：千米/小时
        },
    }, {
        autoRotation: true,
    });
    trail.setData(trailData);
    isMoving = true;
}

四、关键功能实现细节

1. 速度与配速计算

// 速度转换 m/s -> km/h
function covertSpeed(ms) {
    if (ms <= 0) return 0.00
    const kmh = ms * (60 * 60)
    return parseFloat(String(kmh / 1000)).toFixed(2)
}

// 配速计算（分钟/公里）
function toPs(v) {
    function padWithZeros(number, length) {
        return String(number).padStart(length, '0');
    }
    var decimal = (60 / parseFloat(v)).toFixed(2)
    var seconds = Math.floor(decimal % 1 * 60);
    var minutes = Math.floor(decimal);
    return padWithZeros(minutes,2) + "′" + padWithZeros(seconds,2) + "″"
}

2. 时间格式处理

// 时间戳转时分秒格式
function TimeToHFS(timestamp) {
    var time = Math.round(timestamp);
    let hour = Math.floor(time / 3600);
    let min = Math.floor((time % 3600) / 60);
    let sec = Math.floor(time % 60);
    return `${hour.toString().padStart(2, '0')}:${min.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`;
}

3. 实时数据更新

在marker移动过程中实时更新显示数据：

marker.on('moving', function(e) {
    if (e.whiteDot) {
        // 计算已跑里程
        var lc = (TMap.geometry.computeDistance(e.whiteDot.passedLatLngs)/1000).toFixed(3)
        document.getElementById("lc").innerText = "里程：" + lc + " 公里"
        
        // 计算已用时间
        var v1 = covertSpeed(90);
        var v2 = sd;
        var v = v1/v2;
        var sj = TimeToHFS((lc/v1)*v*60*60)
        document.getElementById("sj").innerText = "时间：" + sj
        
        // 计算marker朝向
        roation = TMap.geometry.computeHeading(
            e.whiteDot.passedLatLngs[e.whiteDot.passedLatLngs.length - 2],
            e.whiteDot.passedLatLngs[e.whiteDot.passedLatLngs.length - 1]
        );
    }
});