当前位置：首页 > uni-app

uniapp 画轨迹

2026-02-06 04:51:19uni-app

使用 uniapp 绘制轨迹的方法

使用 map 组件绘制轨迹

uniapp 内置的 map 组件可以用于绘制地图轨迹。需要在 map 组件中设置 polyline 属性来定义轨迹的路径、颜色和宽度等样式。

uniapp 画轨迹

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

<script>
export default {
  data() {
    return {
      latitude: 39.908823,
      longitude: 116.397470,
      polyline: [{
        points: [
          {latitude: 39.908823, longitude: 116.397470},
          {latitude: 39.918823, longitude: 116.407470},
          {latitude: 39.928823, longitude: 116.417470}
        ],
        color: "#FF0000DD",
        width: 4,
        dottedLine: false
      }]
    };
  }
};
</script>

动态更新轨迹

如果需要动态更新轨迹，可以通过修改 polyline 数据实现。例如，通过 GPS 或位置服务获取新的坐标点并添加到 polyline 的 points 数组中。

uniapp 画轨迹

methods: {
  updatePolyline(newPoint) {
    this.polyline[0].points.push(newPoint);
    this.polyline = [...this.polyline]; // 触发视图更新
  }
}

使用第三方地图 SDK

如果需要更高级的轨迹绘制功能（如平滑动画、轨迹回放），可以集成第三方地图 SDK（如高德地图、腾讯地图的 JavaScript API）。通常需要在 web-view 中加载地图 SDK 的 HTML 页面。

<template>
  <view>
    <web-view src="/hybrid/html/map.html"></web-view>
  </view>
</template>

在 map.html 中编写地图轨迹绘制的逻辑：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>轨迹绘制</title>
  <script src="https://webapi.amap.com/maps?v=2.0&key=您的高德地图Key"></script>
</head>
<body>
  <div id="mapContainer" style="width:100%; height:100vh;"></div>
  <script>
    const map = new AMap.Map('mapContainer', {
      viewMode: '2D',
      zoom: 13,
      center: [116.397470, 39.908823]
    });

    const path = [
      new AMap.LngLat(116.397470, 39.908823),
      new AMap.LngLat(116.407470, 39.918823),
      new AMap.LngLat(116.417470, 39.928823)
    ];

    const polyline = new AMap.Polyline({
      path: path,
      strokeColor: "#FF0000",
      strokeWeight: 4,
      map: map
    });
  </script>
</body>
</html>