bug修复

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app" :style="style">
+  <div id="app">
     <router-view />
   </div>
 </template>
@@ -9,33 +9,16 @@ export default {
   name: "App",
   data() {
     return {
-      width: 0,
-      height: 0,
     };
   },
-  computed: {
-    style() {
-      return {
-        width: this.width ? this.width + "px" : "100%",
-        minHeight: this.height ? this.height + "px" : "auto",
-      };
-    },
-  },
   created() {
-    // const width = this.getQueryParam("width") || null;
-    // const height = this.getQueryParam("height") || null;
-    // const apiToken = this.getQueryParam("apiToken") || null;
-    // const userId = this.getQueryParam("userId") || null;
-    // console.log("query=>>", this.$route.query)
     const { width, height, apiToken, userId } = this.$route.query;
-    // console.log("apiToken", apiToken);
-    // console.log("userId=>>", userId)
+    
     if (userId) {
       this.$store.commit("SET_APP_VERSION", {
         type: "userId",
         value: userId,
       });
-      // localStorage.setItem("apiToken", apiToken);
     }
     if (apiToken) {
       this.$store.commit("SET_APP_VERSION", {
@@ -49,36 +32,15 @@ export default {
         type: "height",
         value: height,
       });
-      this.height = height;
     }
     if (width) {
       this.$store.commit("SET_APP_VERSION", {
         type: "width",
         value: width,
       });
-      this.width = width;
     }
   },
-  // watch: {
-  //   $route(to, from) {
-  //     // console.log("this.$route.query==>", this.$route.query);
-  //     // this.width = this.$store.state.width;
-  //     // this.height = this.$store.state.height;
-  //     console.log("from==>", from);
-  //     console.log("to==>", to);
-  //     console.log("this.$route==>", this.$route);
-  //     if (to) {
-  //       this.$nextTick(() => {
-  //         this.$router.removeRoute(from.name);
-  //       });
-  //     }
-  //   },
-  // },
   methods: {
-    getQueryParam(paramName) {
-      const urlParams = new URLSearchParams(window.location.search);
-      return urlParams.get(paramName);
-    },
   },
   beforeDestroy() {
     this.$store.dispatch("disconnect");

src/components/Map.vue

@@ -0,0 +1,129 @@
+<template>
+    <div>
+        <!-- 地图容器 -->
+        <div id="container" style="width:200px;height:100px;"></div>
+        <!-- 输入框用于模拟实时接收经纬度数据 -->
+        <!-- <button @click="updateMarkerPosition">更新位置</button> -->
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TencentMap',
+    data() {
+        return {
+            map: null,
+            marker: null,
+            currentPosition: { latitude: 39.909, longitude: 116.397 }, // 默认北京天安门坐标
+            newPosition: '',
+            attitudeHead: 0,
+        };
+    },
+    mounted() {
+        this.initMap();
+    },
+    computed: {
+        getCurrentPosition() {
+            return this.$store.state.currentPosition;
+        },
+        // 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)
+        // }
+    },
+    methods: {
+        initMap() {
+            const center = new qq.maps.LatLng(this.currentPosition.latitude, this.currentPosition.longitude);
+            this.map = new qq.maps.Map(document.getElementById('container'), {
+                center: center,
+                zoom: 13,
+                mapTypeControl: false, // 禁用地图类型控件
+                // 可以根据需求添加其他控件
+                zoomControl: false, // 显示缩放控件
+                mapTypeId: qq.maps.MapTypeId.ROADMAP // 设置地图类型为普通街景图
+            });
+            const icon = new qq.maps.MarkerImage(
+                'https://wrj-songlanyn.oss-cn-beijing.aliyuncs.com/2025/07/21/20667ea4e2b14e149d758350d819995b.png',  // 图标图片路径（放在 public/ 目录下）
+                // new qq.maps.Size(40, 40),   // 图标大小
+                // new qq.maps.Point(0, 0)   // 锚点位置（图标中心点对准坐标点）
+            );
+            // 添加初始标记
+            this.marker = new qq.maps.Marker({
+                position: center,
+                map: this.map,
+                icon: icon,  // 使用自定义图标
+            });
+        },
+        // 更新标记位置
+        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 standardBearing = (360 + this.$store.state.attitudeHead * 1) % 360;
+                    // this.marker.setIcon(this.createIcon(standardBearing));
+                }
+                // 更新图标及其方向
+                // 移动地图视图到新位置
+                this.map.panTo(newPos);
+                // 更新当前坐标
+                this.currentPosition.latitude = pos.latitude;
+                this.currentPosition.longitude = pos.longitude;
+            } else {
+                // alert('请输入有效的经纬度，格式为"纬度,经度"');
+            }
+        },
+        // 创建带有旋转角度的图标
+        createIcon(direction = 0) {
+            // 创建带有旋转角度的图标
+            const originalUrl = 'https://wrj-songlanyn.oss-cn-beijing.aliyuncs.com/2025/07/21/c2417a25a6844f12ae6f632956e9cf6a.png'; // 自定义图标路径
+            // 创建图标对象
+            const icon = new qq.maps.MarkerImage(
+                originalUrl,
+                // size,
+                // origin,
+                // anchor
+            );
+            
+            console.log("direction", direction);
+            // 设置旋转角度
+            const transformStyle = `rotate(${direction}deg)`;
+            const div = document.createElement('div');
+            div.style.transform = transformStyle;
+            div.style.webkitTransform = transformStyle;
+            // 应用旋转样式
+            // const div = document.createElement('div');
+            // div.style.transform = transformStyle;
+            // div.style.webkitTransform = transformStyle;
+            return icon;
+        },
+    }
+};
+</script>
+
+<style scoped>
+/* 确保地图容器有固定的高度 */
+#container {
+    width: 200px;
+    height: 100px;
+    /* transform: rotate(90deg); */
+
+}
+
+::v-deep a .csssprite {
+    display: none;
+}
+</style>

src/store/index.js

@@ -33,7 +33,11 @@ export default new Vuex.Store({
 
     currentPage: 1, // 1: 订单详情页，2：无人机详情页
     router: null,  // 路由数据
-
+    currentPosition: {
+      latitude: 0,  // 当前位置纬度
+      longitude: 0, // 当前位置经度
+    },
+    attitudeHead: 0,  // 偏航轴角度(Z轴 0到6点钟方向为正值，6到12点钟方向为负值)
   },
   mutations: {
     // 全局状态修改方法
@@ -164,7 +168,9 @@ export default new Vuex.Store({
             if (obj.verticalSpeed != null) flightData.verticalSpeed = (obj.verticalSpeed * 1).toFixed(2);
             if (obj.horizontalSpeed != null) flightData.horizontalSpeed = (obj.horizontalSpeed * 2).toFixed(2);
             if (obj.networkState && obj.networkState.quality != null) flightData.quality = obj.networkState.quality;
-
+            if (obj.latitude != null) flightData.latitude = obj.latitude;
+            if (obj.longitude != null) flightData.longitude = obj.longitude;
+            if (obj.attitudeHead != null) flightData.attitudeHead = obj.attitudeHead;
             this.state.flightData = flightData;
           }
         }

src/views/DroneOperation.vue

@@ -22,16 +22,12 @@
         <div class="data-item">V.S {{ flightData.verticalSpeed }}m/s</div>
       </div>
     </div>
+    <div class="map-box" v-show="currentPosition.latitude">
+      <Map />
+    </div>
     <div class="video-box">
-      <video
-        id="videoElement"
-        controls
-        :width="height + 'px'"
-        :height="width + 'px'"
-        ref="videoRef"
-        x5-video-player-type="x5"
-        muted
-      ></video>
+      <video id="videoElement" controls :width="height + 'px'" :height="width + 'px'" ref="videoRef"
+        x5-video-player-type="x5" muted></video>
     </div>
   </div>
 </template>
@@ -40,9 +36,13 @@
 import flvjs from "flv.js";
 import { getDroneFlightTask, flightTakeOff } from "@/api/home";
 import { Toast, Dialog } from "vant";
+import Map from '@/components/Map.vue'
 
 export default {
   name: "DroneOperation",
+  components: {
+    Map
+  },
   data() {
     return {
       liveUrl: "",
@@ -50,10 +50,6 @@ export default {
       height: 0,
       currentTime: "",
       timer: null,
-      dronePosition: {
-        lat: 39.9042,
-        lng: 116.4074,
-      },
       flvPlayer: null,
       flightTaskUuid: null,
       reconnectNum: 0, // 直播重连次数
@@ -74,6 +70,9 @@ export default {
     flightData() {
       return this.$store.state.flightData || {};
     },
+    currentPosition() {
+      return this.$store.state.currentPosition;
+    }
   },
   created() {
     // console.log("this.$router==>", this.$route);
@@ -145,7 +144,7 @@ export default {
           try {
             flvPlayer.attachMediaElement(videoElement);
             flvPlayer.load(); // 加载视频流
-          } catch {}
+          } catch { }
         }
       } else {
         // alert("当前浏览器不支持FLV.js");
@@ -183,13 +182,13 @@ export default {
             ) {
               this.liveUrl = res.data.startStreamConvert.videoUrl;
               try {
-                this.videoTimer = setTimeout(()=>{
+                this.videoTimer = setTimeout(() => {
                   loading.clear();
                   this.videoTimer = null;
                   this.initPlayer();
                 }, 3000)
-              } catch {}
-            }else{
+              } catch { }
+            } else {
               loading.clear();
             }
           }
@@ -232,7 +231,7 @@ export default {
     if (this.videoTimer) {
       clearTimeout(this.videoTimer);
     }
-    if(this.reconnectTimer){
+    if (this.reconnectTimer) {
       clearTimeout(this.reconnectTimer);
     }
     if (this.flvPlayer) {
@@ -255,6 +254,7 @@ export default {
   margin: 0 !important;
   padding: 0;
 }
+
 .container-title {
   position: absolute;
   box-sizing: border-box;
@@ -267,16 +267,21 @@ export default {
   font-size: 14px;
   z-index: 20000;
   transform: rotate(90deg);
-  right: 0; /* 初始设置为右对齐 */
-  top: 100%; /* 垂直居中 */
-  transform-origin: right top; /* 设置旋转基点在元素的右上角 */
+  right: 0;
+  /* 初始设置为右对齐 */
+  top: 100%;
+  /* 垂直居中 */
+  transform-origin: right top;
+  /* 设置旋转基点在元素的右上角 */
 }
+
 .container-title .title-right {
   flex-shrink: 0;
   margin-left: 10px;
   display: flex;
   align-items: center;
 }
+
 .container-title .title-left {
   flex: 1;
   display: flex;
@@ -317,29 +322,33 @@ export default {
   padding: 0;
   box-sizing: border-box;
   z-index: 20000;
-
   transform: rotate(90deg);
   color: #ffffff;
 }
+
 .flight-data .data-row {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
 }
+
 .flight-data .data-item {
   min-width: 35%;
   text-align: center;
   margin-bottom: 10px;
 }
+
 .video-box {
   transform: rotate(90deg);
   box-sizing: border-box;
   margin: 0;
 }
+
 #videoElement {
   display: block;
-  object-fit: fill; /* 使用cover或fill */
+  object-fit: fill;
+  /* 使用cover或fill */
   margin: 0 !important;
   z-index: 900;
   position: relative;
@@ -347,4 +356,16 @@ export default {
   left: 0;
   bottom: 0; */
 }
+
+.map-box {
+  position: absolute;
+  z-index: 1000;
+  transform: rotate(90deg);
+  right: 80px;
+  /* 初始设置为右对齐 */
+  top: 220px;
+  /* 垂直居中 */
+  transform-origin: right top;
+  /* 设置旋转基点在元素的右上角 */
+}
 </style>

src/views/OrderDetails.vue

@@ -322,17 +322,15 @@ export default {
             }, 500);
           });
         }
-        if (this.form.productDataJosn) {
-          if (this.form.productDataJosn.latitude) {
-            this.$store.commit("SET_APP_VERSION", {
-              type: "latitude",
-              value: this.form.productDataJosn.latitude * 1,
-            });
+        if (this.form.productDataJosn && this.form.productDataJosn.longitude) {
+          let currentPosition = {
+            latitude: this.form.productDataJosn.latitude * 1,  // 当前位置纬度
+            longitude: this.form.productDataJosn.longitude * 1, // 当前位置经度
           }
-          if (this.form.productDataJosn.longitude) {
+          if (this.form.productDataJosn.latitude) {
             this.$store.commit("SET_APP_VERSION", {
-              type: "longitude",
-              value: this.form.productDataJosn.longitude * 1,
+              type: "currentPosition",
+              value: currentPosition,
             });
           }
         }