bug修复

src/components/Map.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <!-- 地图容器 -->
-        <div id="container" style="width:200px;height:100px;"></div>
+        <div id="container" style="width:140px;height:140px;border-radius: 50%;overflow: hidden;"></div>
         <!-- 输入框用于模拟实时接收经纬度数据 -->
         <!-- <button @click="updateMarkerPosition(currentPosition)">更新位置</button> -->
     </div>
@@ -30,18 +30,19 @@ export default {
         getCurrentPosition() {
             return this.$store.state.currentPosition;
         },
-        // getAttitudeHead() {
-        //     return this.$store.state.attitudeHead;
-        // }
+        getAttitudeHead() {
+            return this.$store.state.attitudeHead;
+        }
     },
     watch: {
         getCurrentPosition(val) {
             // console.log("taskNum", val);
             if (val) this.updateMarkerPosition(val)
         },
-        // getAttitudeHead(val) {
-        //     if (val) this.updateMarkerPosition(this.$store.state.currentPosition)
-        // }
+        getAttitudeHead(val) {
+            // console.log("attitudeHead===>", val);
+            if (val) this.updateMarkerPosition(this.$store.state.currentPosition)
+        }
     },
     methods: {
         initMap() {
@@ -72,16 +73,18 @@ export default {
         },
         // 更新标记位置
         updateMarkerPosition(pos = {}) {
+            // console.log("updateMarkerPosition===>", pos);
             if (!pos.latitude) return;
             if (pos.latitude != null && pos.longitude != null) { // 确保输入正确
                 const newPos = new qq.maps.LatLng(pos.latitude, pos.longitude);
                 // 更新当前标记的位置
                 this.marker.setPosition(newPos);
                 if (this.$store.state.attitudeHead != this.attitudeHead && this.$store.state.attitudeHead != null) {
-                    this.attitudeHead = this.$store.state.attitudeHead;
+                    const attitudeHead = this.$store.state.attitudeHead;
+                    this.attitudeHead = attitudeHead;
                     // 创建带有旋转角度的图标
                     // 将特殊偏航角转换为标准方位角
-                    const standardBearing = (360 + this.$store.state.attitudeHead * 1) % 360;
+                    const standardBearing = (360 + attitudeHead * 1) % 360;
                     this.createIcon(standardBearing)
                 }
                 // this.createIcon(90);
@@ -113,10 +116,11 @@ export default {
 <style scoped>
 /* 确保地图容器有固定的高度 */
 #container {
-    width: 200px;
-    height: 100px;
+    width: 140px;
+    height: 140px;
     /* transform: rotate(90deg); */
-
+    border-radius: 50%;
+    overflow: hidden;
 }
 
 ::v-deep a .csssprite {

src/store/index.js

@@ -162,7 +162,7 @@ export default new Vuex.Store({
             let obj = JSON.parse(data.data) || {};
             // console.log('obj==>', obj);
             let flightData = this.state.flightData;
-            let currentPosition = this.state.currentPosition || {};
+            let currentPosition = this.state.currentPosition ? { ...this.state.currentPosition } : {};
             if (obj.battery && obj.battery.capacityPercent != null) flightData.capacityPercent = obj.battery.capacityPercent;
             if (obj.homeDistance != null) flightData.homeDistance = (obj.homeDistance * 1).toFixed(2);
             if (obj.height != null) flightData.height = (obj.height * 1).toFixed(2);
@@ -172,7 +172,7 @@ export default new Vuex.Store({
             if (obj.latitude != null) currentPosition.latitude = obj.latitude;
             if (obj.longitude != null) currentPosition.longitude = obj.longitude;
             if (obj.attitudeHead != null) this.state.attitudeHead = obj.attitudeHead;
-            this.state.currentPosition = currentPosition;
+            this.state.currentPosition = { ...currentPosition };
             this.state.flightData = flightData;
           }
         }

src/views/DroneOperation.vue

@@ -361,9 +361,9 @@ export default {
   position: absolute;
   z-index: 1000;
   transform: rotate(90deg);
-  right: 80px;
+  right: 60px;
   /* 初始设置为右对齐 */
-  top: 220px;
+  top: 160px;
   /* 垂直居中 */
   transform-origin: right top;
   /* 设置旋转基点在元素的右上角 */