更新记录

1.0.0（2023-11-14）

首个版本发布。

平台兼容性

组件功能

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

文档

属性说明

示例代码

<!-- 高德地图轨迹回放 -->
<template>
  <view class="map-trace">
    <template v-if="list">
      <lk-amap-trace
        amap-key="daa29f45bd22dab89187ec700409d1ed"
        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>

在线演示

在线演示地址

其他

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