用Vue在地图上展示路线

要在地图上展示路线，可以使用Vue和地图API结合来实现。下面是一个使用Vue和高德地图API展示路线的示例代码：

1. 首先，引入Vue和高德地图API的脚本文件。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_AMAP_API_KEY"></script>

2. 在Vue的模板中添加一个地图容器元素。

<div id="app">
  <div id="map"></div>
</div>

3. 在Vue的脚本中初始化地图和路线。

new Vue({
  el: "#app",
  mounted() {
    // 初始化地图
    const map = new AMap.Map("map", {
      zoom: 13,
      center: [lng, lat] // 设置地图中心点（lng为经度，lat为纬度）
    });

    // 创建路线规划对象
    const driving = new AMap.Driving({
      map: map,
      panel: "panel" // 将路线规划结果展示在指定的DOM元素中
    });

    // 设置起点、终点坐标
    driving.search([
      { keyword: '起点地址', city: '城市名' },
      { keyword: '终点地址', city: '城市名' }
    ]);
  }
});

在上述代码中，需要将YOUR_AMAP_API_KEY替换为你自己的高德地图API密钥。同时，需要将起点和终点的地址以及城市名替换为实际的起点和终点地址。

4. 在模板中添加一个用于展示路线的面板。

<div id="panel"></div>

5. 最后，在CSS中设置地图和面板的样式。

#map {
  width: 100%;
  height: 400px;
}

#panel {
  width: 100%;
  height: 200px;
  overflow-y: scroll;
}

以上代码示例演示了如何使用Vue和高德地图API在地图上展示路线。你需要将地图中心点的经纬度、起点和终点的地址以及城市名替换为实际的值，然后按照示例代码的结构来编写你的Vue应用。