web-trackMangaer/src/views/trackManager/mapTrack.vue

/**
  // author：jiana
  // time:2025-04-23
  // desc:运单管理
*/
<template>
  <div class="mapTrack">
    <!-- <div class="btnBox">
        <div>轨迹回放控制</div>
        <div style="margin:10px 0;">
          <Button size="small" type="primary" @click="startAnimation" ghost style="margin-right:20px;">开始动画</Button>
          <Button size="small" type="primary" @click="pauseAnimation" ghost>暂停动画</Button>
        </div>
        <div>
          <Button size="small" type="primary" @click="resumeAnimation" ghost style="margin-right:20px;">继续动画</Button>
          <Button size="small" type="primary" @click="stopAnimation" ghost>停止动画</Button>
        </div>
      </div> -->
    <div id="container"></div>
  </div>
</template>
<script>
import { defineComponent, ref ,reactive, onMounted} from 'vue'
import {useRoute} from 'vue-router'
import AMapLoader from "@amap/amap-jsapi-loader";
import axios from 'axios';
import { tms } from '@/request/api'
export default defineComponent({
  components:{
    
  },
  props:{
    waybillNum: { type: String, default: "" }
  },
  setup(props) {
    const route = useRoute()
    const data = ref(null);
    const trajectory = ref([]);
    const loadData = async () =>{
      trajectory.value = []
      await tms.truckTrackQueryByWaybillNum({waybillNum:props.waybillNum}).then(res =>{
        if (res.code == 101) {
          data.value = res.data
          if(data.value.obj && data.value.obj.runRoute){
            data.value.obj.runRoute.forEach(item => {
              if (!isNaN(item.lon) && !isNaN(item.lat)) {
                trajectory.value.push([Number(item.lon),Number(item.lat)])
              }
            });
          }
        }
      })
    }

    const getMap = () =>{
      AMapLoader.load({
        key: '81a1282308f1aae58082425a1ebb91b0',
        version: '2.0',
        plugins: ['AMap.MoveAnimation']
      }).then(AMap => {
        AMap.plugin('AMap.MoveAnimation', () => {
          var map = new AMap.Map('container', {
            center: trajectory.value[0],
          });
          // 起点
          var marker = new AMap.Marker({
            map: map,
            position: trajectory.value[0],
            icon: require('@/assets/images/qidian.png'), // 自定义图标
            offset: new AMap.Pixel(-13, -26),
          });
          // 终点
          var markerEnd = new AMap.Marker({
            map: map,
            position: trajectory.value.slice(-1).pop(),
            icon: require('@/assets/images/zhongdian.png'), // 自定义图标
            offset: new AMap.Pixel(-13, -26),
          });
          // 绘制轨迹
          var polyline = new AMap.Polyline({
            map: map,
            path: trajectory.value,
            showDir:true,
            strokeColor: "#28F",  //线颜色
            strokeWeight: 6,      //线宽
          });
          map.setFitView();
          map.setZoom(7);
        });
      }).catch(e => {
        console.error(e);
      });
    }
    onMounted(async ()=>{
      await loadData()
      await getMap()
    })
    return {
      
    }
  },
})
</script>

<style lang="scss" scoped>
.mapTrack{
  // padding: 20px;
  #container{
    width: 100%; 
    height: 460px;
  }
  .btnBox{
    position: absolute;
    top: 70px;
    left: 20px;
    z-index: 1;
    background: #fff;
    width: 200px;
    height: 110px;
    padding: 10px;
    border-radius: 5px;
  }
}
</style>
<style lang="scss">
.amap-icon{
  width: 40px !important;
  height: 40px !important;
}
.amap-icon img{
  width: 40px !important;
  height: 40px !important;
}
</style>