From 184a5a9ddffe6243c5dec889a1cc2015ceef552d Mon Sep 17 00:00:00 2001
From: Xiao Fan <461179989@qq.com>
Date: Thu, 4 Apr 2024 16:30:39 +0800
Subject: [PATCH] =?UTF-8?q?=E8=82=96=E5=87=A14.3=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/track/index.vue | 73 ++++++++++++++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 src/views/system/track/index.vue

diff --git a/src/views/system/track/index.vue b/src/views/system/track/index.vue
new file mode 100644
index 0000000..086d396
--- /dev/null
+++ b/src/views/system/track/index.vue
@@ -0,0 +1,73 @@
+<template>
+  <div id="container"></div>
+</template>
+<script>
+import AMapLoader from "@amap/amap-jsapi-loader";
+
+export default {
+  name: "map-view",
+  data() {
+    return {
+      carPosition: [116.397428, 39.90923], // 初始化小汽车位置
+      carMarker: null, // 存储小汽车Marker
+    };
+  },
+  mounted() {
+    this.initAMap();
+  },
+  unmounted() {
+    this.map?.destroy();
+  },
+  methods: {
+    initAMap() {
+      AMapLoader.load({
+        key: "e7398786b61ee782417e1749de1f2b39", // 申请好的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() {
+      setInterval(() => {
+        // 更新小汽车位置
+        this.carPosition = this.getRandomPosition();
+        // 更新小汽车Marker的位置
+        this.carMarker.setPosition(this.carPosition);
+      }, 1000);
+    },
+    getRandomPosition() {
+      // 模拟随机生成新的经纬度位置
+      const delta = 0.01; // 控制随机位置变化的大小
+      const lat = this.carPosition[0] + (Math.random() - 0.5) * delta;
+      const lng = this.carPosition[1] + (Math.random() - 0.5) * delta;
+      return [lat, lng];
+    },
+  },
+};
+</script>
+<style scoped>
+#container {
+  width: 25%;
+  height: 250px;
+}
+</style>