vue使用高德地图时怎么根据websocket返回的数据实时展示轨迹

要根据websocket返回的数据实时展示轨迹，你需要使用高德地图提供的API来绘制轨迹。具体步骤如下：

1. 在Vue项目中引入高德地图API，可以使用高德地图JavaScript API或Vue-AMap插件。

2. 创建一个地图实例，并设置地图的中心点和缩放级别。

3. 使用高德地图提供的Polyline类创建一个折线对象，并设置其样式和属性，如颜色、宽度和透明度等。

4. 在websocket的onmessage事件中，将接收到的数据解析成经纬度坐标，并将其添加到折线对象中。

5. 调用折线对象的setPath方法更新折线的路径，实现实时展示轨迹的效果。

示例代码如下：

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

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

export default {
  data() {
    return {
      map: null,
      polyline: null,
      ws: null,
    }
  },
  mounted() {
    AMapLoader.load({
      key: 'YOUR_AMAP_API_KEY',
      version: '2.0',
      plugins: ['AMap.PolyEditor'],
      AMapUI: {
        version: '1.1',
        plugins: ['overlay/SimpleInfoWindow', 'misc/PositionPicker'],
      },
      Loca: {
        version: '1.3.2',
      },
    }).then((AMap) => {
      this.map = new AMap.Map('map-container', {
        zoom: 13,
        center: [120.139998, 30.259244],
      })

      this.polyline = new AMap.Polyline({
        path: [],
        strokeColor: '#3366FF',
        strokeWeight: 5,
        strokeOpacity: 0.8,
      })
      this.polyline.setMap(this.map)

      this.ws = new WebSocket('YOUR_WEBSOCKET_URL')
      this.ws.onmessage = (event) => {
        const data = JSON.parse(event.data)
        const path = data.path.map((item) => [item.lng, item.lat])
        this.polyline.setPath(path)
      }
    })
  },
}
</script>

<style>
#map-container {
  height: 400px;
  width: 100%;
}
</style>

以上示例代码中，使用了Vue-AMap插件和WebSocket API，实现了根据websocket返回的数据实时展示轨迹的功能。你需要将其中的YOUR_AMAP_API_KEY和YOUR_WEBSOCKET_URL替换为你自己的高德地图API Key和websocket地址。