BizMapTrack 地图轨迹回放

地图轨迹回放：高德 JSAPI 2.0 运行时 CDN 加载（app-key 必填，安全密钥可选），轨迹折线（带方向箭头）+ 移动标记 + 播放控制条（播放 / 暂停、进度拖拽、1x/2x/4x 倍速、上一 / 下一帧步进）、当前点信息联动。配送轨迹、巡检路线、车辆回放。无 Key / 加载失败给出可操作提示而非白屏（与 BizMapPicker 同模式）。

基础用法

地图加载中...

1 / 8

上海仓出库09:00121.47800, 31.23040

传入轨迹点，播放控制条驱动回放，point-change 联动当前点信息。

<script setup lang="ts">
/** 场景：基础——轨迹点 + 播放控制（app-key 请替换为自己的高德 Key） */
import { BizMapTrack } from 'vue3-ep-biz-lib'
import type { BizMapTrackPoint } from 'vue3-ep-biz-lib'

/* 上海—杭州配送示意轨迹 */
const points: BizMapTrackPoint[] = [
  { lng: 121.478, lat: 31.2304, time: '09:00', name: '上海仓出库' },
  { lng: 121.52, lat: 31.16, time: '09:40' },
  { lng: 121.4, lat: 30.95, time: '10:20' },
  { lng: 121.2, lat: 30.78, time: '11:05' },
  { lng: 121.0, lat: 30.62, time: '11:50' },
  { lng: 120.6, lat: 30.48, time: '12:40' },
  { lng: 120.22, lat: 30.29, time: '13:30' },
  { lng: 120.16, lat: 30.25, time: '13:45', name: '杭州站签收' },
]
</script>

<template>
  <BizMapTrack
    app-key=""
    :points="points"
    :height="320"
    @map-error="() => {}"
  />
</template>

显示代码

无 Key 降级

地图加载中...

1 / 0

未配置 app-key 时的占位提示（内网 / 未申请场景可预期）。

<script setup lang="ts">
/** 场景：无 Key 降级提示（可预期的占位态） */
import { BizMapTrack } from 'vue3-ep-biz-lib'
</script>

<template>
  <BizMapTrack app-key="" :points="[]" :height="240" />
</template>

显示代码

样式定制

地图加载中...

1 / 4

起点116.36000, 39.90000

stroke-color / stroke-weight 定制轨迹线；height 调整地图高度。

<script setup lang="ts">
/** 场景：轨迹线样式定制 */
import { BizMapTrack } from 'vue3-ep-biz-lib'
import type { BizMapTrackPoint } from 'vue3-ep-biz-lib'

const points: BizMapTrackPoint[] = [
  { lng: 116.36, lat: 39.9, name: '起点' },
  { lng: 116.42, lat: 39.92 },
  { lng: 116.48, lat: 39.9 },
  { lng: 116.52, lat: 39.95, name: '终点' },
]
</script>

<template>
  <BizMapTrack
    app-key=""
    :points="points"
    :height="280"
    stroke-color="#e6a23c"
    :stroke-weight="7"
  />
</template>

显示代码

自动播放与倍速

地图加载中...

1 / 4

广州出发113.26000, 23.13000

autoplay 挂载即播；v-model:speed 倍速切换（1x / 2x / 4x）。

<script setup lang="ts">
/** 场景：autoplay + 倍速 v-model:speed */
import { ref } from 'vue'
import { BizMapTrack } from 'vue3-ep-biz-lib'
import type { BizMapTrackPoint } from 'vue3-ep-biz-lib'

const speed = ref(2)

const points: BizMapTrackPoint[] = [
  { lng: 113.26, lat: 23.13, name: '广州出发' },
  { lng: 113.36, lat: 23.1 },
  { lng: 113.5, lat: 23.05 },
  { lng: 113.62, lat: 22.98, name: '抵达东莞' },
]
</script>

<template>
  <BizMapTrack app-key="" v-model:speed="speed" :points="points" :height="280" autoplay />
</template>

显示代码

事件联动

地图加载中...

1 / 3

成都104.07000, 30.66000

play / pause / ended / point-change 事件日志。

<script setup lang="ts">
/** 场景：事件日志 */
import { ref } from 'vue'
import { BizMapTrack } from 'vue3-ep-biz-lib'
import type { BizMapTrackPoint } from 'vue3-ep-biz-lib'

const logs = ref<string[]>([])

const log = (msg: string): void => {
  logs.value.unshift(msg)
  if (logs.value.length > 5) logs.value.pop()
}

const points: BizMapTrackPoint[] = [
  { lng: 104.07, lat: 30.66, name: '成都' },
  { lng: 104.15, lat: 30.6 },
  { lng: 104.24, lat: 30.55, name: '双流' },
]
</script>

<template>
  <div>
    <BizMapTrack
      app-key=""
      :points="points"
      :height="260"
      @play="log('play：开始回放')"
      @pause="log('pause：暂停')"
      @ended="log('ended：回放结束')"
      @point-change="(i: number, p: BizMapTrackPoint) => log(`point-change：第 ${i + 1} 点 ${p.name ?? ''}`)"
    />
    <p v-for="(item, i) in logs" :key="i" style="margin: 6px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      {{ item }}
    </p>
  </div>
</template>

显示代码

编程式控制

地图加载中...

武汉起点114.31000, 30.60000

expose play / pause / seek 外部驱动回放（与业务时间轴联动）。

<script setup lang="ts">
/** 场景：expose play / pause / seek 外部驱动 */
import { ref } from 'vue'
import { ElButton, ElButtonGroup } from 'element-plus'
import { BizMapTrack } from 'vue3-ep-biz-lib'
import type { BizMapTrackInstance } from 'vue3-ep-biz-lib'

const refEl = ref<BizMapTrackInstance | null>(null)

const points = [
  { lng: 114.31, lat: 30.6, name: '武汉起点' },
  { lng: 114.4, lat: 30.55 },
  { lng: 114.5, lat: 30.52, name: '终点' },
]
</script>

<template>
  <div>
    <BizMapTrack ref="refEl" app-key="" :points="points" :height="260" :show-controls="false" />
    <ElButtonGroup style="margin-top: 10px">
      <ElButton size="small" @click="refEl?.play()">play()</ElButton>
      <ElButton size="small" @click="refEl?.pause()">pause()</ElButton>
      <ElButton size="small" @click="refEl?.seek(0)">seek(起点)</ElButton>
      <ElButton size="small" @click="refEl?.seek(points.length - 1)">seek(终点)</ElButton>
    </ElButtonGroup>
  </div>
</template>

显示代码

长轨迹

地图加载中...

1 / 32

出发09:00116.44000, 39.93000

32 个轨迹点：进度条拖拽快速定位，帧步进逐点核查。

<script setup lang="ts">
/** 场景：长轨迹——30+ 轨迹点，进度拖拽快速定位 */
import { BizMapTrack } from 'vue3-ep-biz-lib'
import type { BizMapTrackPoint } from 'vue3-ep-biz-lib'

/* 沿北京三环近似路径生成 32 个轨迹点 */
const points: BizMapTrackPoint[] = Array.from({ length: 32 }, (_, i) => {
  const angle = (i / 32) * Math.PI * 2
  return {
    lng: 116.38 + Math.cos(angle) * 0.06,
    lat: 39.93 + Math.sin(angle) * 0.05,
    time: `${String(9 + Math.floor(i / 4)).padStart(2, '0')}:${String((i % 4) * 15).padStart(2, '0')}`,
    name: i === 0 ? '出发' : i === 31 ? '返回' : undefined,
  }
})
</script>

<template>
  <BizMapTrack app-key="" :points="points" :height="300" />
</template>

显示代码

纯地图模式

地图加载中...

西湖文化广场08:00120.15000, 30.28000

show-controls=false 收起控制条，仅地图 + 当前点信息（播放由 expose 驱动）。

<script setup lang="ts">
/** 场景：高度定制 + 无控制条——纯地图与当前点信息 */
import { BizMapTrack } from 'vue3-ep-biz-lib'
import type { BizMapTrackPoint } from 'vue3-ep-biz-lib'

const points: BizMapTrackPoint[] = [
  { lng: 120.15, lat: 30.28, time: '08:00', name: '西湖文化广场' },
  { lng: 120.17, lat: 30.25, time: '08:20', name: '武林门' },
  { lng: 120.15, lat: 30.23, time: '08:40', name: '吴山广场' },
]
</script>

<template>
  <BizMapTrack app-key="" :points="points" :height="240" :show-controls="false" />
</template>

显示代码

Props

属性名	类型	默认值	说明
app-key	string	''	高德 Web端(JS API) Key（必填，高德开放平台申请）
security-js-code	string	''	安全密钥（2021-12 后申请的 key 必配，配域名白名单）
points	BizMapTrackPoint[]	[]	轨迹点（lng / lat / time / name，按时间先后）
height	number	360	地图高度 px
stroke-color	string	'#409eff'	轨迹线颜色
stroke-weight	number	5	轨迹线宽
v-model:speed	number	1	播放倍速 1/2/4
autoplay	boolean	false	挂载后自动播放
show-controls	boolean	true	底部播放控制条

Events

事件名	参数	说明
play / pause	—	播放状态切换
ended	—	播放到末尾
point-change	(index, point)	当前轨迹点变化
update:speed	(speed: number)	倍速变化
map-error	(reason: string)	脚本加载 / 初始化失败

Expose

名称	类型	说明
play / pause	() => void	编程式播放控制
seek	(index: number) => void	跳转到指定轨迹点
getMap	() => AMap.Map | null	高德地图实例（叠加覆盖物）

WARNING

需使用方自备高德 Key（Web端 JS API），建议配置域名白名单；内网 / 海外环境不可用。示例页未配置 Key 时展示降级提示。