当前位置：首页 > uni-app

uniapp 画轨迹

2026-03-05 06:32:29uni-app

uniapp 画轨迹的实现方法

使用map组件绘制轨迹

在uniapp中可以通过map组件结合polyline属性实现轨迹绘制。需要准备一组经纬度坐标点，将其作为polyline的points属性值。

示例代码：

uniapp 画轨迹

<template>
  <view>
    <map 
      :latitude="latitude" 
      :longitude="longitude" 
      :polyline="polyline"
      style="width: 100%; height: 300px;">
    </map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: 39.909,
      longitude: 116.397,
      polyline: [{
        points: [
          {latitude: 39.909, longitude: 116.397},
          {latitude: 39.919, longitude: 116.407},
          {latitude: 39.929, longitude: 116.417}
        ],
        color: "#FF0000DD",
        width: 4,
        dottedLine: false
      }]
    }
  }
}
</script>

动态获取位置并绘制轨迹

可以通过uni.getLocation接口持续获取位置信息，将位置点存入数组后更新polyline的points属性。

uniapp 画轨迹

data() {
  return {
    positionList: [],
    timer: null
  }
},
methods: {
  startTracking() {
    this.timer = setInterval(() => {
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          this.positionList.push({
            latitude: res.latitude,
            longitude: res.longitude
          });
          this.polyline[0].points = this.positionList;
        }
      });
    }, 5000);
  },
  stopTracking() {
    clearInterval(this.timer);
  }
}

轨迹样式自定义

polyline支持多种样式配置：

color：设置轨迹线颜色
width：设置线宽
dottedLine：是否虚线
arrowLine：是否带箭头

polyline: [{
  points: [...],
  color: "#00FF00",
  width: 6,
  dottedLine: true,
  arrowLine: true
}]

保存和加载历史轨迹

可以使用uni.setStorage将轨迹数据保存到本地，需要时通过uni.getStorage读取。

saveTrack() {
  uni.setStorage({
    key: 'trackData',
    data: this.positionList
  });
},
loadTrack() {
  uni.getStorage({
    key: 'trackData',
    success: (res) => {
      this.positionList = res.data;
      this.polyline[0].points = res.data;
    }
  });
}