cloud-ui/src/views/business/records/history.vue

<template>
  <div>

    <div class="dashboard-container">
      <div id="container"></div>
    </div>

    {{ this.vehicle }}

  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import {getPosition, vehicleData} from "@/api/business/records";

export default {
  name: "map-view",
  data() {
    return {
      carPosition: ["116.397428", "39.90923"], // 初始化小汽车位置
      carMarker: null, // 存储小汽车Marker
      animationInterval: null,//存储动画定时器
      lineArr: [],
      recordsId: 0,
      vehicle: {}
    };
  },
  created() {
    this.recordsId = this.$route.query.recordsId;
    this.getFindVD()
  },
  mounted() {
    this.initAMap();
    // 初始化 echarts
    this.initBarChart();
  },
  beforeDestroy() {
    clearInterval(this.animationInterval);//清除定时器
    this.map?.destroy();
  },
  methods: {
    getFindVD() {
      vehicleData(this.recordsId)
    },

    initAMap() {
      AMapLoader.load({
        key: "ce38a6b072b603934f6270bd9e97ed49", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 11, // 初始化地图级别
            center: [116.397428, 39.90923], // 初始化地图中心点位置
          });

          // 车辆初始化
          this.carMarker = new AMap.Marker({
            position: this.carPosition,
            icon: 'https://webapi.amap.com/images/car.png',
            map: this.map, // 将Marker添加到地图上
          });

          // 在地图初始化完成后启动小车动画
          this.startCarAnimation();
        })
        .catch((e) => {
          console.log(e);
        });
    },

    startCarAnimation() {
      this.animationInterval = setInterval(() => {
        this.getRealTimeDataAndUpdatePosition();
      }, 1000);
    },

    getRealTimeDataAndUpdatePosition() {
      getPosition(this.recordsId)
        .then(response => {
          this.vehicle = response.data
          //更新小汽车位置
          this.carPosition = [this.vehicle.longitude, this.vehicle.latitude];
          //更新小汽车Marker的位置
          this.carMarker.setPosition(this.carPosition);
        })
    },

    // initBarChart() {
    //   // 通过 $ref 进行挂载
    //   let myChart = this.$echarts.init(this.$refs.barChart);
    //   let option = {
    //     series: [
    //       {
    //         type: 'gauge',
    //         axisLine: {
    //           lineStyle: {
    //             width: 30,
    //             color: [
    //               [0.3, '#67e0e3'],
    //               [0.7, '#37a2da'],
    //               [1, '#fd666d']
    //             ]
    //           }
    //         },
    //         pointer: {
    //           itemStyle: {
    //             color: 'auto'
    //           }
    //         },
    //         axisTick: {
    //           distance: -30,
    //           length: 8,
    //           lineStyle: {
    //             color: '#fff',
    //             width: 2
    //           }
    //         },
    //         splitLine: {
    //           distance: -30,
    //           length: 30,
    //           lineStyle: {
    //             color: '#fff',
    //             width: 4
    //           }
    //         },
    //         axisLabel: {
    //           color: 'inherit',
    //           distance: 40,
    //           fontSize: 20
    //         },
    //         detail: {
    //           valueAnimation: true,
    //           formatter: '{value} km/h',
    //           color: 'inherit'
    //         },
    //         data: [
    //           {
    //             value: 70
    //           }
    //         ]
    //       }
    //     ]
    //   };
    //   setInterval(function () {
    //     myChart.setOption({
    //       series: [
    //         {
    //           data: [
    //             {
    //               value: +(Math.random() * 100).toFixed(2)
    //             }
    //           ]
    //         }
    //       ]
    //     });
    //   }, 2000);
    //   myChart.setOption(option);
    // },
  },
}
</script>
<style  scoped>
#container{
  padding:0px;
  margin: 0px;
  width: 25%;
  height: 200px;
}
.amap-marker-icon {
  border: none !important; /* 移除Marker的边框 */
  box-shadow: none !important; /* 移除Marker的阴影 */
}
.home {
  width: 500px;
  height: 400px;
  margin: auto;
  border: 3px solid lightcoral;

  //  宽高是必须给的，可以给百分比、具体的像素等....
  .barChart {
    width: 100%;
    height: 100%;
  }
}
</style>