当前位置：首页 > VUE

vue实现轨迹图

2026-02-18 06:41:59VUE

Vue 实现轨迹图的方法

在 Vue 中实现轨迹图可以通过多种方式完成，以下是几种常见的实现方法：

使用高德地图或百度地图 API

高德地图和百度地图提供了丰富的 JavaScript API，可以方便地绘制轨迹图。需要先在项目中引入对应的地图 SDK。

// 安装高德地图 SDK
npm install @amap/amap-jsapi-loader --save

在 Vue 组件中加载地图并绘制轨迹：

import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  data() {
    return {
      map: null,
      path: [
        [116.368904, 39.913423],
        [116.382122, 39.901176],
        [116.387271, 39.912501],
      ],
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: '你的高德地图Key',
        version: '2.0',
      }).then((AMap) => {
        this.map = new AMap.Map('map-container', {
          viewMode: '2D',
          zoom: 13,
          center: [116.397428, 39.90923],
        });
        this.drawPolyline();
      });
    },
    drawPolyline() {
      const polyline = new AMap.Polyline({
        path: this.path,
        strokeColor: '#3366FF',
        strokeWeight: 5,
      });
      this.map.add(polyline);
    },
  },
};

使用 ECharts 绘制轨迹图

ECharts 是一个强大的数据可视化库，支持绘制各种类型的图表，包括轨迹图。

vue实现轨迹图

安装 ECharts：

npm install echarts --save

在 Vue 组件中使用 ECharts 绘制轨迹：

import * as echarts from 'echarts';

export default {
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById('chart-container'));
      const option = {
        series: [{
          type: 'lines',
          coordinateSystem: 'geo',
          data: [{
            coords: [
              [116.368904, 39.913423],
              [116.382122, 39.901176],
            ],
            lineStyle: {
              color: '#FF0000',
              width: 2,
            },
          }],
        }],
        geo: {
          map: 'china',
          roam: true,
        },
      };
      this.chart.setOption(option);
    },
  },
};

使用 Leaflet 绘制轨迹图

Leaflet 是一个轻量级的地图库，适合在移动端和简单场景下使用。

vue实现轨迹图

安装 Leaflet：

npm install leaflet --save

在 Vue 组件中使用 Leaflet 绘制轨迹：

import L from 'leaflet';

export default {
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = L.map('map-container').setView([39.90923, 116.397428], 13);
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(this.map);

      const polyline = L.polyline([
        [39.913423, 116.368904],
        [39.901176, 116.382122],
      ], {
        color: 'red',
      }).addTo(this.map);
    },
  },
};

自定义 SVG 轨迹图

如果需要完全自定义的轨迹图，可以使用 SVG 在 Vue 中绘制。

<template>
  <svg width="500" height="300">
    <polyline
      points="100,100 150,150 200,100"
      stroke="blue"
      stroke-width="2"
      fill="none"
    />
  </svg>
</template>