<!--<template>-->
<!--  <div class="container">-->
<!--    <div class="title">实时轨迹</div>-->
<!--    {{vin}}-->
<!--    <div id="map" style="width: 100%; height: 500px;"></div>-->
<!--    <br>-->
<!--    <br>-->
<!--    <div class="title">单体电池最低电压</div>-->
<!--    <div class="value">{{ data.lowestVoltage }}</div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import { redisList } from "@/api/fence/fence";-->

<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      map: null,-->
<!--      polyline: null,-->
<!--      carMarker: null,-->
<!--      vin: this.$route.params.vin,-->
<!--      intervalId: null,-->
<!--      data: {},-->
<!--      lastPosition: null, // 添加一个变量来存储上一个位置-->
<!--    };-->
<!--  },-->
<!--  created() {-->
<!--    this.intervalId = setInterval(this.fetchData, 1000);-->
<!--    this.fetchData();-->
<!--  },-->
<!--  methods: {-->
<!--    fetchData() {-->
<!--      console.log(this.vin);-->
<!--      redisList(this.vin)-->
<!--        .then(res => {-->
<!--          console.log("res:{}", res);-->
<!--          this.data = res.data;-->
<!--          this.updateTrajectory();-->
<!--        })-->
<!--        .catch(err => {-->
<!--          console.error("Error fetching data:", err);-->
<!--        });-->
<!--    },-->
<!--    initMap() {-->
<!--      this.map = new AMap.Map('map', {-->
<!--        center: [116.397428, 39.90923],-->
<!--        zoom: 13,-->
<!--      });-->

<!--      this.polyline = new AMap.Polyline({-->
<!--        map: this.map,-->
<!--        path: [],-->
<!--        strokeColor: "#FF0000",-->
<!--        strokeWeight: 5,-->
<!--      });-->

<!--      const carIcon = new AMap.Icon({-->
<!--        size: new AMap.Size(40, 50),-->
<!--        image: 'https://webapi.amap.com/images/car.png',-->
<!--        imageSize: new AMap.Size(30, 15)-->
<!--      });-->

<!--      this.carMarker = new AMap.Marker({-->
<!--        icon: carIcon,-->
<!--        offset: new AMap.Pixel(-20, -25),-->
<!--        autoRotation: true,-->
<!--      });-->

<!--      this.carMarker.setMap(this.map);-->
<!--    },-->
<!--    updateTrajectory() {-->
<!--      if (this.data.latitude && this.data.longitude) {-->
<!--        const newPoint = [this.data.longitude, this.data.latitude];-->
<!--        const path = this.polyline.getPath();-->
<!--        path.push(newPoint);-->
<!--        this.polyline.setPath(path);-->
<!--        this.map.setCenter(newPoint);-->

<!--        // 计算方位角并更新小车图标的旋转角度-->
<!--        if (this.lastPosition) {-->
<!--          const angle = this.calculateAngle(this.lastPosition)-->
<!--          this.calculateAngle(this.lastPosition, newPoint);-->
<!--          this.carMarker.setAngle(angle);-->
<!--        }-->

<!--        this.carMarker.setPosition(newPoint);-->
<!--        this.lastPosition = newPoint; // 更新上一个位置-->
<!--      } else {-->
<!--        console.error('Invalid latitude or longitude data:', this.data);-->
<!--      }-->
<!--    },-->
<!--    calculateAngle(start, end) {-->
<!--      const [startLng, startLat] = start;-->
<!--      const [endLng, endLat] = end;-->

<!--      const deltaLng = endLng - startLng;-->
<!--      const deltaLat = endLat - startLat;-->

<!--      const angle = Math.atan2(deltaLat, deltaLng) * (180 / Math.PI);-->
<!--      return angle;-->
<!--    }-->
<!--  },-->
<!--  mounted() {-->
<!--    this.initMap();-->
<!--  },-->
<!--  beforeDestroy() {-->
<!--    if (this.intervalId) {-->
<!--      clearInterval(this.intervalId);-->
<!--    }-->
<!--    if (this.map) {-->
<!--      this.map.destroy();-->
<!--    }-->
<!--  },-->
<!--};-->
<!--</script>-->
