高德地图的轨迹巡航

1、index.html中引入

<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

2、vue组件实现如下

<template>
  <div id="map_container">
      <div id="map_test"></div>
      <div id="btn_pos">
        <button  @click="drawXunHang">开始巡航</button>
        <button  @click="destroyXunHang">销毁巡航</button>
        <a href="https://lbs.amap.com/api/amap-ui/demos/amap-ui-pathsimplifier/simple-demo">更多参考链接</a>
      </div>
  </div>
  
</template>

<script>
import AMap from "AMap";
export default {
  data() {
    return {
      map: null,
      pathSimplifierIns:null,   //巡航器
    };
  },
  methods: {
    //初始化地图
    initMap() {
      this.map = new AMap.Map("map_test", {
        zoom: 12,
        center: [102.70929, 25.046025],
      });
      this.map.on("complete", (e) => {
        this.drawXunHang();
      });
    },
    //轨迹巡航
    drawXunHang() {
      AMapUI.load(["ui/misc/PathSimplifier"], (PathSimplifier) => {
        if (!PathSimplifier.supportCanvas) {
          alert("当前环境不支持 Canvas！");
          return;
        }
        // 创建组件实例
        var pathSimplifierIns = new PathSimplifier({
          map: this.map,   //绑定的地图
          data: [{   // 巡航路径
              path: [[102.64054,25.039634],[102.640915,25.040781],[102.641355,25.0417],[102.64202,25.042414],[102.642498,25.042905],[102.643082,25.043371]],
          }], 
          getPath: (pathData, pathIndex) => {   // 获取巡航路径中的路径坐标数组
            return pathData.path;
          },
          renderOptions: {   
            renderAllPointsIfNumberBelow: 100,   //绘制路线节点，如不需要可设置为-1
          }
        });
        // 创建巡航器
        var pathNavigator = pathSimplifierIns.createPathNavigator(0, {
          loop: false, // 是否循环
          speed: 300, // 速度(km/h)
          pathNavigatorStyle: {  //使用图片
              width: 16,
              height:33,
              content: PathSimplifier.Render.Canvas.getImageContent('./static/img/highway/xiaoche.png'),
          },
          strokeStyle: null,
          fillStyle: null,
          //经过路径的样式
          pathLinePassedStyle: {
            lineWidth: 6,
            strokeStyle: "black",
            dirArrowStyle: {
              stepSpace: 15,
              strokeStyle: "red",
            },
          },
        });
        pathNavigator.start();
        this.pathSimplifierIns = pathSimplifierIns;
      });
    },
    destroyXunHang(){
        this.pathSimplifierIns && this.pathSimplifierIns.hide();
    }
  },
  mounted() {
    this.initMap();
  },
};
</script>

<style scoped>
#map_container,#map_test {
  width: 100%;
  height: 100%;
}
#btn_pos{
    position: fixed;
    top: 10px;
    left:10px;
    z-index: 10;
}

</style>

常见报错

这是由于地图初始化时，viewMode 使用的是3D场景，在3D场景下，无法使用轨迹巡航，
修改如下：