更新记录

1.2.0（2024-12-15） 下载此版本

1.增加自定义控制回放业务处理的方法；

2.新增update-progress监听事件，用于获取当前回放进度值；

3.解决同一个组件或同一个页面中引入多个lk-amap-trace组件时，地图可能加载失败的问题。

1.0.1（2024-09-17） 下载此版本

1.0.1（2024-09-17）

1.优化组件的宽高可以自定义；

2.现在可以隐藏组件默认的日期范围选择器和播放控制面板，通过插槽可以插入自定义内容；

3.解决组件初始化时有时不显示地图的问题。

1.0.0（2023-11-14） 下载此版本

首个版本发布。

平台兼容性

uni-app

其他

组件功能

基于高德地图的轨迹回放。

文档

属性说明

• 为确保地图轨迹正常显示，请在load-data事件的回调函数中加载数据。

插槽说明

示例代码

<!-- 高德地图轨迹回放vue3 -->
<template>
  <view class="map-trace">
    <template v-if="list">
      <!-- 使用默认回放控制面板 -->
      <lk-amap-trace
        amap-key="xxx"
        map-height="calc(100% - 420rpx)"
        service-host="http://localhost:8888/"
        :list="list"
        @load-data="loadData"
        @update-trace-index="getTraceIndex"
        @update-progress="updateProgress"
      ></lk-amap-trace>

      <!-- 使用自定义回放控制面板 -->
      <lk-amap-trace
        ref="traceMap"
        map-height="calc(100% - 420rpx)"
        amap-key="xxx"
        :use-jscode="false"
        :date-picker="false"
        :play-panel="false"
        :list="list"
        @load-data="loadData"
        @update-progress="updateProgress"
      ></lk-amap-trace>
    </template>
  </view>
</template>

<script setup>
  import { ref } from 'vue'

  const list = ref([]) // 轨迹坐标节点
  const traceIndex = ref(-1) // 当前轨迹坐标节点下标

  const loadData = () => {
    list.value = Array.from({length: 10}, () => ({
      lng: (Math.random() * (135.083 - 73.55 + 1) + 73.55).toFixed(6), // 随机经度
      lat: (Math.random() * (53.55 - 3.85 + 1) + 3.85).toFixed(6) // 随机纬度
    }))
  }

  const getTraceIndex = index => traceIndex.value = index

  /**
   * 回放控制
   */
  const traceMap = ref(null)
  const isPlay = computed(() => traceMap.value?.isPlay) // 是否正在回放
  const speedIndex = computed(() => traceMap.value?.speedIndex) // 回放速度下标
  const progress = ref(0) // 回放进度值

  // 切换回放/暂停状态
  const togglePlay = () => traceMap.value.togglePlay()

  // 更新回放进度值
  const updateProgress = value => progress.value = value

  // 更新回放进度条滑块位置
  const sliderChange = value => traceMap.value.slotProgressChange(value)

  // 切换回放速度
  const changeSpeed = index => traceMap.value.speedIndex = index
</script>

<style lang="scss">
  .map-trace {
    height: 100%;
  }
</style>

<!-- 高德地图轨迹回放vue2 -->
<template>
  <view class="map-trace">
    <template v-if="list">
      <lk-amap-trace
        amap-key="xxx"
        service-host="http://localhost:8888/"
        :list="list"
        @load-data="loadData"
        @update-trace-index="getTraceIndex"
      ></lk-amap-trace>
    </template>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [],
        traceIndex: -1
      }
    },
    methods: {
      loadData() {
        this.list = Array.from({length: 10}, () => ({
          lng: (Math.random() * (135.083 - 73.55 + 1) + 73.55).toFixed(6), // 随机经度
          lat: (Math.random() * (53.55 - 3.85 + 1) + 3.85).toFixed(6) // 随机纬度
        }))
      },
      getTraceIndex(index) {
        this.traceIndex = index
      }
    }
  }
</script>

<style lang="scss">
  .map-trace {
    height: 100%;
  }
</style>

在线演示

在线演示地址

其他

组件难免有不足之处，欢迎各位老铁们批评指正，有任何问题都可以在评论区中留言。