图标定位修改

src/static/map.html

@@ -421,6 +421,7 @@
         lastLocationTime: 0, // 上次位置更新时间
         lastLocationPoint: null, // 上次位置点，用于计算移动速度
         isMoving: false, // 是否在移动状态
+        screenOrientation: 'landscape', // 屏幕方向：'landscape'（横屏）或 'portrait'（竖屏）
         elements: {
             panel: null,
             tree: null,
@@ -1549,18 +1550,24 @@
             // 转换公式：画布角度 = 90度 - 地图角度（因为画布的0度对应地图的90度）
             
             // 应用方向偏移量（用于校正方向偏差）
-            const adjustedHeading = this.normalizeHeading(heading + (this.headingOffset || 0));
+            let adjustedHeading = this.normalizeHeading(heading + (this.headingOffset || 0));
+            
+            // 根据屏幕方向进一步调整（如果需要）
+            // 注意：方向校正已经在handleOrientation中处理，这里通常不需要再次调整
+            // 但如果图标旋转仍有问题，可以在这里添加额外的校正
             
             // 转换为画布旋转角度
             // 标准转换：画布的0度（向右）对应地图的90度（正东）
             // 所以：画布角度 = 90度 - 地图角度
+            
+            // 根据屏幕方向调整旋转角度
             let rotation = (90 - adjustedHeading) * Math.PI / 180;
             
-            // 如果方向仍然不对，可以尝试以下方案（取消注释）：
+            // 如果横屏和竖屏方向表现不同，可以在这里进一步调整
-            // 方案1：反转180度
+            // 例如：竖屏时可能需要额外的180度反转
-            // rotation = (270 - adjustedHeading) * Math.PI / 180;
+            // if (this.screenOrientation === 'portrait') {
-            // 方案2：直接使用heading（如果图标本身已经指向正确方向）
+            //     rotation = (270 - adjustedHeading) * Math.PI / 180;
-            // rotation = -adjustedHeading * Math.PI / 180;
+            // }
             
             ctx.rotate(rotation);
 
@@ -1587,6 +1594,18 @@
             return heading;
         },
 
+        /**
+         * 检测屏幕方向
+         */
+        detectScreenOrientation() {
+            const width = window.innerWidth || window.screen.width;
+            const height = window.innerHeight || window.screen.height;
+            // 如果宽度大于高度，认为是横屏；否则是竖屏
+            this.screenOrientation = width > height ? 'landscape' : 'portrait';
+            console.log('屏幕方向:', this.screenOrientation, `(${width}x${height})`);
+            return this.screenOrientation;
+        },
+
         /**
          * 计算两个角度之间的最短差值（考虑0-360度边界）
          */
@@ -1680,6 +1699,22 @@
             this.headingHistory = [];
             this.lastOrientationUpdateTime = 0;
             
+            // 检测屏幕方向
+            this.detectScreenOrientation();
+            
+            // 监听屏幕方向变化
+            if (window.addEventListener) {
+                window.addEventListener('resize', () => {
+                    this.detectScreenOrientation();
+                });
+                // 监听orientationchange事件（移动设备）
+                window.addEventListener('orientationchange', () => {
+                    setTimeout(() => {
+                        this.detectScreenOrientation();
+                    }, 100); // 延迟100ms确保方向已改变
+                });
+            }
+            
             console.log('开始监听设备方向（优先使用旋转矢量传感器）...');
             
             // 1. 优先尝试使用旋转矢量传感器（通过DeviceOrientationEvent的quaternion）
@@ -1867,15 +1902,10 @@
             else if (event.alpha !== null && event.alpha !== undefined && !isNaN(event.alpha)) {
                 // event.alpha 是绕Z轴旋转的角度（0-360度）
                 // 在某些设备上，alpha是逆时针的，需要转换为顺时针
-                // 根据设备类型调整：Android通常需要反转，iOS可能不需要
+                // 根据实际测试，Android设备通常需要反转
-                // 先尝试不反转
+                // 尝试反转：360 - alpha
-                rawHeading = event.alpha;
+                rawHeading = (360 - event.alpha) % 360;
-                
+                console.log('使用传统传感器(alpha):', event.alpha.toFixed(1), '度 ->', rawHeading.toFixed(1), '度');
-                // 如果方向反了，可以尝试反转（取消下面的注释）：
-                // rawHeading = (360 - event.alpha) % 360;
-                
-                // 或者使用headingOffset来校正（更灵活）
-                // this.headingOffset = 180; // 在初始化时设置
             } 
             // 4. iOS Safari 使用 webkitCompassHeading
             else if (event.webkitCompassHeading !== null && event.webkitCompassHeading !== undefined) {
@@ -1887,8 +1917,36 @@
             }
             
             if (rawHeading !== null && !isNaN(rawHeading)) {
+                // 根据屏幕方向和移动状态分别校正方向角度
+                let correctedHeading = rawHeading;
+                const isPortrait = this.screenOrientation === 'portrait';
+                const isLandscape = this.screenOrientation === 'landscape';
+                
+                // 横屏 + 移动：需要反转180度
+                if (this.isMoving && isLandscape) {
+                    correctedHeading = (rawHeading + 180) % 360;
+                    console.log('横屏+移动时方向反转:', rawHeading.toFixed(1), '度 ->', correctedHeading.toFixed(1), '度');
+                }
+                // 横屏 + 静止：保持原始方向或需要特定校正
+                else if (!this.isMoving && isLandscape) {
+                    // 横屏静止时，可能需要加180度或保持原样，根据实际测试调整
+                    // correctedHeading = (rawHeading + 180) % 360; // 如果需要反转，取消注释
+                    correctedHeading = rawHeading; // 暂时保持原样
+                    console.log('横屏+静止时方向:', rawHeading.toFixed(1), '度 ->', correctedHeading.toFixed(1), '度');
+                }
+                // 竖屏 + 移动：需要反转180度
+                else if (this.isMoving && isPortrait) {
+                    correctedHeading = (rawHeading + 180) % 360;
+                    console.log('竖屏+移动时方向反转:', rawHeading.toFixed(1), '度 ->', correctedHeading.toFixed(1), '度');
+                }
+                // 竖屏 + 静止：需要反转180度
+                else if (!this.isMoving && isPortrait) {
+                    correctedHeading = (rawHeading + 180) % 360;
+                    console.log('竖屏+静止时方向反转:', rawHeading.toFixed(1), '度 ->', correctedHeading.toFixed(1), '度');
+                }
+                
                 // 使用移动平均滤波平滑方向数据（减少抖动）
-                const smoothedHeading = this.smoothHeading(rawHeading);
+                const smoothedHeading = this.smoothHeading(correctedHeading);
                 
                 // 更新方向（如果变化足够大）
                 this.updateHeadingIfChanged(smoothedHeading);