uni-app 类似健身软件里面能够记录运动记录的地图插件

在uni-app中，实现类似健身软件记录运动记录的地图插件，你可以使用 uni.getLocation API 获取用户的实时位置信息，并利用这些位置信息在地图上绘制运动轨迹。下面是一个简单的示例代码，展示了如何使用 uni-app 和 map 组件来实现这一功能。

首先，确保你的项目中已经引入了 map 组件，并且在 manifest.json 中配置了必要的权限（如位置信息权限）。

1. 配置 manifest.json

在 manifest.json 中添加必要的权限配置：

"mp-weixin": {
    "requiredPrivateInfos": ["getUserInfo", "getLocation"]
}

2. 页面结构（pages/index/index.vue）

<template>
  <view>
    <button @click="startRecording">开始记录</button>
    <map 
      id="map" 
      :longitude="longitude" 
      :latitude="latitude" 
      :scale="14" 
      :markers="markers" 
      :polyline="polyline" 
      style="width: 100%; height: 500px;"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      longitude: 0,
      latitude: 0,
      markers: [],
      polyline: [],
      recording: false,
      positions: []
    };
  },
  methods: {
    startRecording() {
      if (this.recording) return;
      this.recording = true;
      this.positions = [];
      this.markers = [];
      this.polyline = [{
        points: [],
        color: "#FF0000DD",
        width: 4,
        dottedLine: false
      }];

      const interval = setInterval(() => {
        if (!this.recording) clearInterval(interval);
        this.getLocation();
      }, 1000);
    },
    getLocation() {
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          this.longitude = res.longitude;
          this.latitude = res.latitude;
          this.positions.push({ latitude: res.latitude, longitude: res.longitude });
          this.markers.push({
            id: this.markers.length + 1,
            latitude: res.latitude,
            longitude: res.longitude,
            iconPath: '/static/location.png',
            width: 20,
            height: 20
          });
          this.polyline[0].points = this.positions;
        }
      });
    }
  }
};
</script>

3. 样式（可选）

你可以根据需要调整地图组件的样式。

4. 停止记录功能

为了完整性，你可能还需要一个停止记录的功能。你可以在 methods 中添加一个 stopRecording 方法，并在适当的时候调用它（比如一个按钮点击事件）。

这个示例展示了如何使用 uni-app 的 map 组件和 uni.getLocation API 来记录运动轨迹。你可以根据实际需求进行更多的优化和定制，比如增加轨迹平滑处理、添加更多UI元素等。