当前位置：首页 > VUE

vue实现路线绘画

2026-02-19 12:51:05VUE

Vue 实现路线绘制的方法

在 Vue 中实现路线绘制通常需要结合地图 API（如高德、百度或 Google Maps）和前端技术。以下是几种常见的方法：

使用高德地图 API

安装高德地图 JavaScript API 的 Vue 封装库（如 vue-amap）：

npm install vue-amap --save

初始化高德地图并绘制路线：

vue实现路线绘画

import VueAMap from 'vue-amap';

Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: '您的高德地图Key',
  plugin: ['AMap.Driving']
});

// 在组件中使用
<template>
  <div id="map-container">
    <el-amap vid="amap" :center="center" :zoom="zoom">
      <el-amap-driving 
        :start-point="startPoint" 
        :end-point="endPoint" 
        :policy="policy">
      </el-amap-driving>
    </el-amap>
  </div>
</template>

<script>
export default {
  data() {
    return {
      center: [116.397428, 39.90923],
      zoom: 13,
      startPoint: [116.379028, 39.865042],
      endPoint: [116.427281, 39.903719],
      policy: 0
    };
  }
};
</script>

使用百度地图 API

安装百度地图 JavaScript API：

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的百度地图Key"></script>

在 Vue 组件中绘制路线：

vue实现路线绘画

<template>
  <div id="map-container"></div>
</template>

<script>
export default {
  mounted() {
    const map = new BMap.Map("map-container");
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

    const driving = new BMap.DrivingRoute(map, {
      renderOptions: { map: map, autoViewport: true }
    });
    driving.search("北京站", "北京西站");
  }
};
</script>

使用 Google Maps API

安装 Google Maps JavaScript API：

<script src="https://maps.googleapis.com/maps/api/js?key=您的Google地图Key&libraries=places"></script>

在 Vue 组件中绘制路线：

<template>
  <div id="map-container"></div>
</template>

<script>
export default {
  mounted() {
    const map = new google.maps.Map(document.getElementById("map-container"), {
      center: { lat: 39.9042, lng: 116.4074 },
      zoom: 12
    });

    const directionsService = new google.maps.DirectionsService();
    const directionsRenderer = new google.maps.DirectionsRenderer();
    directionsRenderer.setMap(map);

    directionsService.route(
      {
        origin: "北京站",
        destination: "北京西站",
        travelMode: google.maps.TravelMode.DRIVING
      },
      (response, status) => {
        if (status === "OK") {
          directionsRenderer.setDirections(response);
        }
      }
    );
  }
};
</script>

自定义路线绘制

如果需要更灵活的路线绘制方式，可以使用 Canvas 或 SVG 手动绘制：

<template>
  <canvas ref="canvas" width="800" height="600"></canvas>
</template>

<script>
export default {
  mounted() {
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext('2d');

    // 绘制路线
    ctx.beginPath();
    ctx.moveTo(100, 100);
    ctx.lineTo(300, 300);
    ctx.lineTo(500, 100);
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 3;
    ctx.stroke();

    // 添加标记点
    this.drawMarker(ctx, 100, 100, '起点');
    this.drawMarker(ctx, 500, 100, '终点');
  },
  methods: {
    drawMarker(ctx, x, y, text) {
      ctx.beginPath();
      ctx.arc(x, y, 10, 0, Math.PI * 2);
      ctx.fillStyle = 'red';
      ctx.fill();
      ctx.fillStyle = 'black';
      ctx.font = '12px Arial';
      ctx.fillText(text, x + 15, y + 5);
    }
  }
};
</script>