vue中高德地图实时展示航行路线怎么做

要在Vue中实时展示航行路线，可以使用高德地图提供的JavaScript API。以下是一些可能需要的步骤：

1. 在高德开发者平台上注册并获取API key。

2. 在Vue项目中安装高德地图JavaScript SDK的npm包。

3. 创建一个地图实例，并将其添加到Vue组件中。

4. 使用高德地图提供的航线规划服务，获取航行路线数据。

5. 将航行路线数据渲染到地图上，并实时更新。

以下是一个可能的代码示例：

<template>
  <div ref="map" class="map"></div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  mounted() {
    AMapLoader.load({
      key: 'YOUR_API_KEY',
      version: '2.0',
      plugins: ['AMap.Riding'],
    }).then((AMap) => {
      const map = new AMap.Map(this.$refs.map, {
        zoom: 12,
        center: [120.1551, 30.2741],
      });

      const riding = new AMap.Riding({
        map,
      });

      riding.search([{
        keyword: '杭州市',
      }, {
        keyword: '西湖',
      }]);

      riding.on('complete', (result) => {
        const path = result.routes[0].path;

        // 渲染路线
        const polyline = new AMap.Polyline({
          path,
          isOutline: true,
          outlineColor: '#ffeeee',
          borderWeight: 2,
          strokeWeight: 5,
          strokeColor: '#0091ff',
          lineJoin: 'round',
          lineCap: 'round',
          zIndex: 50,
        });
        polyline.setMap(map);

        // 实时更新路线
        setInterval(() => {
          const nextPath = result.routes[0].path.slice(polyline.getPath().length - 1);
          if (nextPath.length > 0) {
            polyline.setPath(polyline.getPath().concat(nextPath));
          }
        }, 5000);
      });
    });
  },
};
</script>

<style>
.map {
  width: 100%;
  height: 500px;
}
</style>

该示例使用高德地图的`AMap.Riding`服务获取杭州市的航行路线，并将其渲染到地图上。然后，使用`setInterval`函数每5秒钟从行车路线数据中获取新的路线段，并将其添加到地图上以实时更新路线。注意，为了避免在地图上重复渲染路线，这里使用了`AMap.Polyline`的`setPath`方法，而不是重新创建一个新的Polyline对象。