当前位置：首页 > VUE

vue 实现地图路线

2026-01-22 17:04:09VUE

使用 Vue 实现地图路线功能

集成地图 SDK

Vue 中实现地图路线功能通常需要依赖第三方地图 SDK，例如高德地图、百度地图或腾讯地图。以高德地图为例，可以通过以下方式集成：

vue 实现地图路线

在 index.html 中引入高德地图 JavaScript API：

<script src="https://webapi.amap.com/maps?v=2.0&key=你的高德地图Key"></script>

安装官方提供的 Vue 组件库（可选）：
```
npm install @amap/amap-vue
```

初始化地图组件

在 Vue 组件中初始化地图并设置容器：

vue 实现地图路线

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

<script>
export default {
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const map = new AMap.Map('map-container', {
        zoom: 13,
        center: [116.397428, 39.90923] // 北京中心点坐标
      });
      this.map = map; // 保存到组件实例
    }
  }
};
</script>

绘制路线

使用高德地图的 AMap.Driving 插件实现路线规划：

methods: {
  drawRoute(start, end) {
    const driving = new AMap.Driving({
      map: this.map,
      panel: "route-panel" // 可选：显示路线信息的DOM元素ID
    });

    driving.search(
      [{ keyword: start, city: '北京' }],
      [{ keyword: end, city: '北京' }],
      (status, result) => {
        if (status === 'complete') {
          console.log('路线规划完成', result);
        } else {
          console.error('路线规划失败', result);
        }
      }
    );
  }
}

添加标记点

在地图上标记起点和终点：

addMarker(position, title) {
  const marker = new AMap.Marker({
    position: new AMap.LngLat(position[0], position[1]),
    title: title,
    map: this.map
  });
  return marker;
}

完整示例组件

<template>
  <div>
    <div id="map-container" style="width: 100%; height: 500px"></div>
    <div id="route-panel" style="width: 300px"></div>
    <button @click="planRoute">规划路线</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: null
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = new AMap.Map('map-container', {
        zoom: 13,
        center: [116.397428, 39.90923]
      });
    },
    planRoute() {
      const start = [116.379028, 39.865042]; // 起点坐标
      const end = [116.418757, 39.921957];   // 终点坐标

      this.addMarker(start, '起点');
      this.addMarker(end, '终点');
      this.drawRoute(start, end);
    },
    // 其他方法同上...
  }
};
</script>