vue高德地图多条轨迹

Vue高德地图多条轨迹可以通过以下步骤实现：
1. 引入高德地图JavaScript API和Vue-AMap插件。
2. 在Vue组件中使用Vue-AMap插件的地图组件，并在地图组件的ready事件中初始化地图和插件。
3. 使用高德地图JavaScript API的DrivingRoute类进行路线规划，并将规划结果添加到地图上。
4. 可以通过设置不同的颜色和透明度来区分不同的路线。
5. 可以在路线上添加途经点marker，并为marker添加点击监听事件，以显示途径点的详细内容。

相关问题

vue高德地图api实时轨迹

### Vue 高德地图 API 实时轨迹 示例 教程

#### 创建高德地图实例并初始化
为了在Vue项目中使用高德地图API实现实时轨迹功能，首先需要创建一个高德地图实例，并对其进行必要的配置。这通常是在组件的`mounted()`生命周期钩子内完成。

import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  data() {
    return {
      map: null,
      polyline: null, // 轨迹线对象
      marker: null,  // 移动标记物
      path: []       // 存储轨迹坐标数组
    };
  },
  mounted() {
    AMapLoader.load({
      key: 'your_amap_key', // 替换成自己的key
      version: "2.0",
      plugins: []
    }).then((AMap) => {
      this.map = new AMap.Map('container', {
        zoom: 10,
        center: [116.397428, 39.90923], // 默认中心点可以更改为任意位置
      });
      
      // 初始化polyline用于绘制轨迹线路
      this.polyline = new AMap.Polyline({
          path: [],
          strokeColor: "#FF33FF", // 线颜色
          strokeOpacity: 1,       // 线透明度
          strokeWeight: 6         // 线宽
      });

      // 将polyline添加到map上
      this.polyline.setMap(this.map);

      // 添加移动marker
      this.marker = new AMap.Marker({
          icon: "https://webapi.amap.com/images/car.png",
          position: [116.397428, 39.90923],
          angle: 0,
          autoRotation: true     // 自动旋转角度跟随方向变化
      });

      // 设置marker初始位置
      this.marker.setMap(this.map);
    }).catch(e => console.log(e));
  }
}

上述代码展示了如何通过引入`@amap/amap-jsapi-loader`来加载高德地图库，并设置了一个基本的地图容器以及两个重要的属性——`polyline`(用来描绘路径线条) 和 `marker`(代表正在沿路线上行驶的对象)[^1]。

#### 获取实时数据更新轨迹
为了让轨迹能够反映最新的行车状态，需定期获取新的GPS坐标并将这些新加入的数据点追加至现有的路径列表中。这里假设有一个函数`getRealTimeLocation()`可以从服务器或其他来源获得最新的一组经纬度信息：

methods: {
  async getRealTimeLocation() {
    const locationData = await fetch('/api/getLatestPosition'); // 假设这是请求接口的方式
    
    if (locationData && Array.isArray(locationData)) {
      let lastPoint = this.path[this.path.length - 1];
      let nextPoints = locationData.filter(point => JSON.stringify(lastPoint) !== JSON.stringify([point.lng, point.lat]));
      
      this.path.push(...nextPoints.map(({lng, lat}) => [lng, lat]));

      // 更新polyline和marker的位置
      this.updatePolylineAndMarker();
    }
  },

  updatePolylineAndMarker() {
    this.polyline.setPath(this.path); // 使用最新的path刷新polyline显示

    if (this.path.length > 0){
      var latestPositon = this.path[this.path.length - 1]; // 取得最后一个坐标作为当前位置
      this.marker.setPosition(latestPositon);             // 更新marker位置
      
      // 如果有多个点，则计算最后两点之间的方位角以调整图标朝向
      if (this.path.length >= 2){
        let prevPosition = this.path[this.path.length - 2];
        let direction = Math.atan2(
            latestPositon[1]-prevPosition[1],
            latestPositon[0]-prevPosition[0]
        ) * 180 / Math.PI;
        
        this.marker.setRotation(direction);
      }

      // 地图视窗自动适应所有已知地点范围内的最佳缩放级别
      this.map.setFitView([this.polyline]);
    }
  }
},
created(){
  setInterval(() => {
    this.getRealTimeLocation(); // 定期调用此方法模拟接收实时位置更新
  }, 5000);                     // 每隔五秒执行一次
}

这段逻辑实现了每隔一段时间就去拉取最新的地理位置信息，并将其转换成适合于高德地图使用的格式后添加到当前路径末端；同时也会相应地改变`polyline`所表示的道路形状及其上的`marker`指向的方向[^3]。

vue 高德多条轨迹

在Vue中使用高德地图绘制多条轨迹，可以通过以下步骤实现：
1. 引入高德地图和VueAMap插件，并进行全局配置。
2. 在Vue组件中使用VueAMap组件，并设置地图的key和插件。
3. 在Vue组件中定义多条轨迹的数据，可以使用模拟数据或者从后端获取。
4. 在Vue组件中使用高德地图提供的Polyline组件，循环渲染多条轨迹。

具体实现步骤如下：
1. 在main.js中引入高德地图和VueAMap插件，并进行全局配置：

import VueAMap from 'vue-amap'
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
  key: 'your amap key',
  plugin: ['AMap.PolyEditor', 'AMap.MarkerClusterer', 'AMap.Geolocation']
})

2. 在Vue组件中使用VueAMap组件，并设置地图的key和插件：

<template>
  <div>
    <el-amap :zoom="zoom" :center="center" :plugin="plugin" :key="key">
      <el-amap-polyline v-for="(item, index) in lines" :key="index" :path="item.path" :style="lineStyle"></el-amap-polyline>
    </el-amap>
  </div>
</template>

<script>
export default {
  data() {
    return {
      key: 'your amap key',
      zoom: 10,
      center: [116.397428, 39.90923],
      plugin: ['AMap.PolyEditor', 'AMap.MarkerClusterer', 'AMap.Geolocation'],
      lines: [
        {
          name: '城配线路1',
          path: [
            [100.340417, 27.376994],
            [101.226354, 33.827452],
            [101.392174, 34.208439],
            [102.905846, 35.232876]
          ],
          pathNodeName: ['城配a', '城配b', '城配c', '城配d']
        },
        {
          name: '城配线路2',
          path: [
            [100.340417, 27.376994],
            [107.424376, 27.222793],
            [113.753046, 30.046619],
            [118.058013, 34.970313]
          ],
          pathNodeName: ['城配a', '城配e', '城配f', '城配g']
        }
      ],
      lineStyle: {
        strokeColor: '#FF33FF',
        strokeOpacity: 0.8,
        strokeWeight: 6,
        strokeStyle: 'solid'
      }
    }
  }
}
</script>

3. 在Vue组件中定义多条轨迹的数据，可以使用模拟数据或者从后端获取。

4. 在Vue组件中使用高德地图提供的Polyline组件，循环渲染多条轨迹。