uni-app 开发地图轨迹记录插件

太需要这样的一个插件了。

在uni-app中开发一个地图轨迹记录插件，可以利用uni-app提供的地图组件和相关的API来实现。以下是一个简单的代码案例，用于记录用户的移动轨迹。

首先，确保在pages.json中配置了地图页面的路径，并在该页面的.vue文件中引入地图组件。

1. 在pages.json中配置页面路径：

{
  "pages": [
    {
      "path": "pages/map/map",
      "style": {
        "navigationBarTitleText": "地图轨迹记录"
      }
    }
    // 其他页面配置...
  ]
}

2. 在pages/map/map.vue中编写地图轨迹记录逻辑：

<template>
  <view>
    <map 
      id="map" 
      :longitude="longitude" 
      :latitude="latitude" 
      :scale="scale" 
      :markers="markers"
      show-location
      style="width: 100%; height: 100%;"
      @locationchange="onLocationChange"
    ></map>
    <view v-if="trajectory.length > 0">
      <text>轨迹记录:</text>
      <view v-for="(point, index) in trajectory" :key="index">
        经度: {{ point.longitude }}, 纬度: {{ point.latitude }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      longitude: 0,
      latitude: 0,
      scale: 15,
      markers: [],
      trajectory: []
    };
  },
  methods: {
    onLocationChange(e) {
      this.longitude = e.detail.longitude;
      this.latitude = e.detail.latitude;
      this.markers = [{
        id: 1,
        latitude: this.latitude,
        longitude: this.longitude,
        iconPath: '/static/location.png',
        width: 50,
        height: 50
      }];
      this.trajectory.push({ longitude: this.longitude, latitude: this.latitude });
    }
  },
  onLoad() {
    // 获取当前位置（可选，用于初始化地图中心）
    uni.getLocation({
      type: 'gcj02',
      success: (res) => {
        this.longitude = res.longitude;
        this.latitude = res.latitude;
      }
    });
  }
};
</script>

<style>
/* 页面样式 */
</style>

在这个示例中，我们使用了uni-app的<map>组件来显示地图，并通过@locationchange事件监听位置变化。每当位置发生变化时，我们会更新地图的中心点、标记点以及轨迹数组。轨迹数组trajectory中保存了用户移动过的所有经纬度点，可以在页面上显示出来。

请注意，这个示例只是一个基本的实现，实际应用中可能还需要考虑轨迹的平滑处理、地图的缩放和拖动、轨迹数据的持久化存储等功能。根据具体需求，可以进一步扩展和优化代码。