轨迹云 xt-map-track #

<template>
  <xt-map-track
    ref="map"
    :height="'60vh'"
    :map-key="mapKey"
    :map-track-list="mapTrackList"
    :shop-track-list="shopTrackList"
  />
  <button type="primary" @click="handleClick">点击重制</button>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { searchMapTracks } from '@/api/map'
import type { MapTrackList, ShopTrackList } from '@/components/xt-map-track/type'

const mapKey = 'QQHBZ-FOCRB-VPCUK-NNMZ7-BA773-B7BU7'

const mapTrackList = ref<MapTrackList>([])

const shopTrackList = ref<ShopTrackList>([])

const map = ref()
// 模拟请求
const _searchMapTracks = async () => {
  const params = {
    key: mapKey,
    service_id: '***********',
    entity_id: '***********',
    start_time: 1709568300,
    end_time: 1709570100
  }
  const [err, res] = await searchMapTracks(params)
  if (err) return
  const { result, status } = res
  if (status !== 0) {
    return
  }
  mapTrackList.value = result.track
  // 模拟门店坐标
  shopTrackList.value = [
    {
      lat: 40.04179884,
      lng: 116.27350477,
      name: '门店1'
    },
    {
      lat: 40.04195077,
      lng: 116.27457211,
      name: '门店2'
    }
  ]
}

const handleClick = async () => {
  await map.value.initMap()
}

onMounted(async () => {
  await _searchMapTracks()
  await map.value.loadScript()
})
</script>