vue 使用高德地图JSAPI——轨迹巡航

使用vue-amap

1、使用npm 安装vue-amap

npm install vue-amap --save

2、在main.js中引入vue-amap

import VueAMap from 'vue-amap'
 
Vue.use(VueAMap)
 
VueAMap.initAMapApiLoader({
  key: '高德地图申请的key',
  plugin: [//高德地图扩展插件(按需添加)
    'AMap.Autocomplete', // 输入提示插件
    'AMap.PlaceSearch', // POI搜索插件
    'AMap.Scale', // 右下角缩略图插件 比例尺
    'AMap.OverView', // 地图鹰眼插件
    'AMap.ToolBar', // 地图工具条
    'AMap.MapType', // 类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
    'AMap.PolyEditor', // 编辑 折线多，边形
    'AMap.CircleEditor', // 圆形编辑器插件
    'AMap.Geolocation' // 定位控件，用来获取和展示用户主机所在的经纬度位置
  ],
  uiVersion: '1.1', // ui库版本，不配置不加载,
  v: '2.0'
})

3、高德地图轨迹巡航需要使用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>

效果图：