更新记录

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

1.0.1（2024-09-17）

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

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

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

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

首个版本发布。

平台兼容性

组件功能

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

文档

属性说明

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

插槽说明

示例代码

<!-- 高德地图轨迹回放vue3 -->
<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 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
</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>

在线演示

在线演示地址

其他

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