vue 高德地图JSAPI（第二篇：轨迹巡航）

vue-ampa配置方法：https://blog.csdn.net/qq_40716778/article/details/105505163 

高德地图轨迹巡航需要使用UI组件PathSimplifier，代码如下：

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

<script>
import { lazyAMapApiLoaderInstance } from 'vue-amap'
export default {
  data() {
    return {
      map: '', // 地图
      // 轨迹数组，格式[{},{},...]
      path: [
        {
          path: [
            [116.368904, 39.913423],
            [116.382122, 39.901176],
            [116.387271, 39.912501],
            [116.398258, 39.904600],
            [116.368904, 39.913423]
          ]
        }
      ]
    }
  },
  mounted() {
    lazyAMapApiLoaderInstance.load().then(() => {
      this.map = new AMap.Map('test-map', {
        zooms: [13, 18], // 地图缩放范围
        center: new AMap.LngLat(116.397428, 39.90923)
      })
      AMapUI.load(['ui/misc/PathSimplifier'], (PathSimplifier) => {
        if (!PathSimplifier.supportCanvas) {
          alert('当前环境不支持 Canvas！')
          return
        }
        // 创建组件实例
        var pathSimplifierIns = new PathSimplifier({
          map: this.map,
          zIndex: 100, // 图层叠加顺序
          data: this.path, // 巡航路径
          // 获取巡航路径中的路径坐标数组
          getPath: (pathData, pathIndex) => {
            return pathData.path
          }
        })
        // 创建巡航器
        var pathNavigator = pathSimplifierIns.createPathNavigator(0, {
          loop: true, // 是否循环
          speed: 2000 // 速度(km/h)
        })
        pathNavigator.start()
      })
    })
  }
}
</script>

<style scoped>
  #test-map{
    height: 650px;
  }
</style>

效果图：

以上代码是实现巡航功能的简单代码，更多属性参考https://lbs.amap.com/api/javascript-api/reference-amap-ui/mass-data/pathsimplifier