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

最新推荐文章于 2024-09-25 10:39:45 发布

优耀星

最新推荐文章于 2024-09-25 10:39:45 发布

阅读量2.2k

点赞数 3

分类专栏： vue 高德地图文章标签： vue api

本文链接：https://blog.youkuaiyun.com/qq_40716778/article/details/105511730

版权

vue 高德地图专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在Vue项目中使用高德地图API和UI组件PathSimplifier实现地图轨迹巡航功能。通过代码示例展示了如何加载地图、设置路径及创建巡航器，实现地图上的动态轨迹展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-ampa配置方法：https://blog.youkuaiyun.com/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>

效果图：