当前位置：首页 > VUE

vue实现路线绘画

2026-01-18 20:27:58VUE

Vue 中实现路线绘制的方法

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

使用 Google Maps API

安装 google-maps 依赖：

npm install google-maps

在 Vue 组件中引入 Google Maps API 并绘制路线：

<template>
  <div id="map" style="width: 100%; height: 400px;"></div>
</template>

<script>
import { Loader } from "google-maps";

export default {
  data() {
    return {
      map: null,
      directionsService: null,
      directionsRenderer: null,
    };
  },
  async mounted() {
    const loader = new Loader("YOUR_API_KEY");
    const google = await loader.load();

    this.map = new google.maps.Map(document.getElementById("map"), {
      center: { lat: 39.9042, lng: 116.4074 },
      zoom: 12,
    });

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

    this.calculateAndDisplayRoute();
  },
  methods: {
    calculateAndDisplayRoute() {
      this.directionsService.route(
        {
          origin: { lat: 39.9042, lng: 116.4074 },
          destination: { lat: 31.2304, lng: 121.4737 },
          travelMode: "DRIVING",
        },
        (response, status) => {
          if (status === "OK") {
            this.directionsRenderer.setDirections(response);
          }
        }
      );
    },
  },
};
</script>

使用高德地图 API

安装 vue-amap 插件：

npm install vue-amap

在 Vue 项目中使用高德地图绘制路线：

<template>
  <div id="amap-container" style="width: 100%; height: 400px;"></div>
</template>

<script>
import AMap from "vue-amap";

export default {
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = new AMap.Map("amap-container", {
        zoom: 12,
        center: [116.397428, 39.90923],
      });

      const path = [
        [116.397428, 39.90923],
        [116.407428, 39.91923],
        [116.417428, 39.92923],
      ];

      const polyline = new AMap.Polyline({
        path: path,
        strokeColor: "#3366FF",
        strokeWeight: 5,
      });

      this.map.add(polyline);
    },
  },
};
</script>

使用百度地图 API

引入百度地图 JavaScript API：

<template>
  <div id="baidu-map" style="width: 100%; height: 400px;"></div>
</template>

<script>
export default {
  mounted() {
    const script = document.createElement("script");
    script.src =
      "https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY&callback=initMap";
    document.head.appendChild(script);

    window.initMap = () => {
      const map = new BMap.Map("baidu-map");
      map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);

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