肖凡4.3提交

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>