From 7ab1cda76944d4f6e3cba6d34dc4fa9ec36156bd Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Wed, 14 Jan 2026 11:13:20 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9A=E4=BD=8D=E5=9B=BE=E6=A0=87=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/static/image/real_postion.png | Bin 0 -> 831 bytes
 src/static/map.html               | 375 +++++++++++++++++++++++-------
 2 files changed, 294 insertions(+), 81 deletions(-)
 create mode 100644 src/static/image/real_postion.png

diff --git a/src/static/image/real_postion.png b/src/static/image/real_postion.png
new file mode 100644
index 0000000000000000000000000000000000000000..b8bf71a6e1727ac8b0ae9933c3dffde2a5d8f81a
GIT binary patch
literal 831
zcmV-F1Hk-=P)<h;3K|Lk000e1NJLTq001cf001Be1^@s6k8e>v0008?Nkl<ZcmeE{
zA&}ER6o&sC=RqKuxzr*+Bg!=rfkna4Is^iVIHu|J3<|>xvSq*_nZc&O4IT`#K{6N^
z?7{N>>~6EkCGDmO;%2&&mwo$oU-rwtujwAnLEAxgbx8k3Nu^XMHWV9l0ooa)0FA{G
zF(qJ2v6)ylme^8kCKgJp@zomg#!Nj+Qbn*>cCS;8aKqET_$Z)bS=Z>=9&)M%58kOC
zpN4oeIM92hKY{oI5WNC|W1#mO7`+ANpOLlwJzNnd7EmfJuHV%hGFBm`DiN^c#VuU6
z+YpXW6M<ZO(@{bbkf5C7SkHhpJ2U>q&L2|4jd1}~VKBa#Kby)CE{~k`2pGKv><h>W
z?;n;Q<WyNW)*WWI0Z~%+(Z}g*oW<&H1f{CZyqB8mA*Jqctf*WDXCH0>3CH8Kai6{f
z8cKZ*Hsw`A>Z460Ie|imQVTEXz{@YXZ+hp;IXQ=pU+EShHJm-#$~PQduY69UAl0Oq
zq{@BFT-FsK_d)dvN1Ls3ZU-0hK}nH(!oy2{trmqVuf{1to+3hk6l>ah^LgQt&;jPS
zi8;B8O?gGgI7mTIAg+UT6u_bRh+~Tun!1+MwW7#8ija&D^hq#T!7}DpD*q~WXn*B)
z?Aw>>+Buu*C!B?}>n!Xa^blYUr`cL0B+Z%fa_?U&ENgh&g<LZr>`^d+hD{lDKgj&B
zGv;gjr*d8_4gx8$4axONmJ<nU>Q(A8wV<r6<wJmdIi)-%V4VM*E(CB=UQ;#phh#QE
zO})xLO)SP}2AJFh2;r!-nq!PF;sEkQM%e<7TQf-eKm+^zH~MeBBC9DXNr>bgKp^(&
zDEB!J-KbzsR3xa5Y`AX+X&(BxADrB|8bnV|(3emKD}AOc)uZnip(25coS2u}3exUC
zShIOgVuavP@{175cqDVYsNU*DB<_860%>;>l2nYxIhUSr6X^+Sm(=xZ<DEjT-KoXo
z4zh)Kh18vr1vy#_c1pGouaNo=00960cdXej00006Nkl<Z0{~W#`9Wc_s1g7G002ov
JPDHLkV1gJ9dnf<^

literal 0
HcmV?d00001

diff --git a/src/static/map.html b/src/static/map.html
index 2d4730d..7f3a50e 100644
--- a/src/static/map.html
+++ b/src/static/map.html
@@ -7,6 +7,21 @@
 
     <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
     <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=iqyZkSZPurf61MhFV7hesbDukHdMBEEb"></script>
+    <script type="text/javascript" src="https://api.map.baidu.com/library/Convertor/1.2/src/Convertor_min.js"></script>
+    <script type="text/javascript">
+        // 确保Convertor库加载完成
+        window.baiduMapConvertorReady = false;
+        if (typeof BMapGL !== 'undefined' && typeof BMapGL.Convertor !== 'undefined') {
+            window.baiduMapConvertorReady = true;
+        } else {
+            // 监听Convertor库加载
+            setTimeout(function() {
+                if (typeof BMapGL !== 'undefined' && typeof BMapGL.Convertor !== 'undefined') {
+                    window.baiduMapConvertorReady = true;
+                }
+            }, 1000);
+        }
+    </script>
 
     <title>百度地图</title>
     <style>
@@ -393,6 +408,7 @@
             watchPositionId: null,
             watchOrientationId: null
         },
+        locationIconCache: null,
         elements: {
             panel: null,
             tree: null,
@@ -502,6 +518,12 @@
                 return;
             }
 
+            // 等待地图和Convertor库加载完成
+            if (!this.map) {
+                setTimeout(() => this.initLocationTracking(), 200);
+                return;
+            }
+
             // 创建定位标记图标（带方向的箭头）
             this.createLocationIcon();
 
@@ -574,6 +596,111 @@
             );
         },
 
+        /**
+         * WGS84坐标转BD09坐标（优先使用百度地图Web API，最准确）
+         */
+        wgs84ToBd09(wgs_lng, wgs_lat, callback) {
+            // 优先使用Web API（最准确）
+            this.wgs84ToBd09WebAPI(wgs_lng, wgs_lat, callback);
+        },
+
+        /**
+         * 使用百度地图Web服务API进行坐标转换
+         */
+        wgs84ToBd09WebAPI(wgs_lng, wgs_lat, callback) {
+            const ak = 'iqyZkSZPurf61MhFV7hesbDukHdMBEEb'; // 百度地图AK
+            const coords = `${wgs_lng},${wgs_lat}`;
+            const url = `https://api.map.baidu.com/geoconv/v1/?coords=${coords}&from=1&to=5&ak=${ak}`;
+            
+            const xhr = new XMLHttpRequest();
+            xhr.open('GET', url, true);
+            xhr.timeout = 5000;
+            xhr.onreadystatechange = () => {
+                if (xhr.readyState === 4) {
+                    if (xhr.status === 200) {
+                        try {
+                            const response = JSON.parse(xhr.responseText);
+                            if (response.status === 0 && response.result && response.result.length > 0) {
+                                const point = response.result[0];
+                                const result = { lng: point.x, lat: point.y };
+                                console.log('Web API转换成功 - WGS84:', wgs_lng, wgs_lat, '-> BD09:', result.lng, result.lat);
+                                if (callback) callback(result);
+                                return;
+                            } else {
+                                console.warn('Web API返回错误:', response);
+                            }
+                        } catch (e) {
+                            console.warn('Web API解析失败:', e);
+                        }
+                    }
+                    // API调用失败，使用备用算法
+                    const result = this.wgs84ToBd09Fallback(wgs_lng, wgs_lat);
+                    console.log('使用备用算法转换 - WGS84:', wgs_lng, wgs_lat, '-> BD09:', result.lng, result.lat);
+                    if (callback) callback(result);
+                }
+            };
+            xhr.onerror = () => {
+                console.warn('Web API网络错误，使用备用算法');
+                const result = this.wgs84ToBd09Fallback(wgs_lng, wgs_lat);
+                if (callback) callback(result);
+            };
+            xhr.ontimeout = () => {
+                console.warn('Web API超时，使用备用算法');
+                const result = this.wgs84ToBd09Fallback(wgs_lng, wgs_lat);
+                if (callback) callback(result);
+            };
+            xhr.send();
+        },
+
+        /**
+         * WGS84转BD09算法（精确版，针对中国地区优化）
+         */
+        wgs84ToBd09Fallback(wgs_lng, wgs_lat) {
+            const x_PI = 3.14159265358979324 * 3000.0 / 180.0;
+            const PI = 3.1415926535897932384626;
+            const a = 6378245.0;
+            const ee = 0.00669342162296594323;
+            
+            let x = Number(wgs_lng);
+            let y = Number(wgs_lat);
+            
+            // WGS84转GCJ02（火星坐标）- 使用精确算法
+            let dlat = this.transformLat(x - 105.0, y - 35.0);
+            let dlng = this.transformLng(x - 105.0, y - 35.0);
+            let radlat = y / 180.0 * PI;
+            let magic = Math.sin(radlat);
+            magic = 1 - ee * magic * magic;
+            let sqrtmagic = Math.sqrt(magic);
+            dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
+            dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
+            let mglat = y + dlat;
+            let mglng = x + dlng;
+            
+            // GCJ02转BD09（百度坐标）- 使用精确算法
+            let z = Math.sqrt(mglng * mglng + mglat * mglat) + 0.00002 * Math.sin(mglat * x_PI);
+            let theta = Math.atan2(mglat, mglng) + 0.000003 * Math.cos(mglng * x_PI);
+            let bd_lng = z * Math.cos(theta) + 0.0065;
+            let bd_lat = z * Math.sin(theta) + 0.006;
+            
+            return { lng: bd_lng, lat: bd_lat };
+        },
+
+        transformLat(lng, lat) {
+            let ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
+            ret += (20.0 * Math.sin(6.0 * lng * Math.PI) + 20.0 * Math.sin(2.0 * lng * Math.PI)) * 2.0 / 3.0;
+            ret += (20.0 * Math.sin(lat * Math.PI) + 40.0 * Math.sin(lat / 3.0 * Math.PI)) * 2.0 / 3.0;
+            ret += (160.0 * Math.sin(lat / 12.0 * Math.PI) + 320 * Math.sin(lat * Math.PI / 30.0)) * 2.0 / 3.0;
+            return ret;
+        },
+
+        transformLng(lng, lat) {
+            let ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
+            ret += (20.0 * Math.sin(6.0 * lng * Math.PI) + 20.0 * Math.sin(2.0 * lng * Math.PI)) * 2.0 / 3.0;
+            ret += (20.0 * Math.sin(lng * Math.PI) + 40.0 * Math.sin(lng / 3.0 * Math.PI)) * 2.0 / 3.0;
+            ret += (150.0 * Math.sin(lng / 12.0 * Math.PI) + 300.0 * Math.sin(lng / 30.0 * Math.PI)) * 2.0 / 3.0;
+            return ret;
+        },
+
         /**
          * 更新位置
          */
@@ -581,56 +708,73 @@
             const coords = position.coords || position;
             const { latitude, longitude, heading, accuracy } = coords;
             
-            if (!latitude || !longitude) return;
-
-            // 将WGS84坐标转换为百度坐标
-            const point = new BMapGL.Point(longitude, latitude);
-            
-            // 使用百度地图的坐标转换（如果需要）
-            // 注意：BMapGL.Point 可以直接使用WGS84坐标，但为了更准确，建议转换
-            // 这里先直接使用，如果发现位置偏移，再添加坐标转换
-            
-            // 保存当前位置（使用原始坐标，转换在显示时处理）
-            this.state.currentLocation = {
-                lat: latitude,
-                lng: longitude,
-                accuracy: accuracy || 0
-            };
-
-            // 如果有方向信息，更新方向
-            if (heading !== null && heading !== undefined) {
-                this.state.currentHeading = heading;
+            if (!latitude || !longitude) {
+                console.warn('位置信息无效:', { latitude, longitude });
+                return;
             }
 
-            // 更新地图上的标记
-            this.updateLocationMarker();
+            console.log('收到位置更新 - WGS84:', longitude, latitude, '精度:', accuracy, '方向:', heading);
+
+            // 将WGS84坐标转换为百度BD09坐标（使用官方API）
+            this.wgs84ToBd09(longitude, latitude, (bd09) => {
+                if (!bd09) {
+                    // 如果转换失败，使用备用算法
+                    console.warn('坐标转换返回空，使用备用算法');
+                    bd09 = this.wgs84ToBd09Fallback(longitude, latitude);
+                }
+                
+                console.log('坐标转换完成 - BD09:', bd09.lng, bd09.lat);
+                
+                // 保存转换后的百度坐标
+                this.state.currentLocation = {
+                    lat: bd09.lat,
+                    lng: bd09.lng,
+                    accuracy: accuracy || 0
+                };
+
+                // 如果有方向信息，更新方向
+                if (heading !== null && heading !== undefined && !isNaN(heading)) {
+                    const oldHeading = this.state.currentHeading;
+                    this.state.currentHeading = heading;
+                    if (Math.abs(heading - oldHeading) > 1) {
+                        console.log('方向更新（来自GPS）:', heading);
+                    }
+                }
+
+                // 更新地图上的标记
+                this.updateLocationMarker();
+            });
         },
 
         /**
          * 更新定位标记
          */
         updateLocationMarker() {
-            if (!this.map || !this.state.currentLocation) return;
+            if (!this.map || !this.state.currentLocation) {
+                console.warn('无法更新定位标记：地图或位置信息缺失');
+                return;
+            }
 
             const { lng, lat } = this.state.currentLocation;
             
-            // 创建百度地图点（百度地图会自动处理坐标转换）
+            // 创建百度地图点（已转换为BD09坐标）
             const point = new BMapGL.Point(lng, lat);
-
-            // 创建带方向的图标
-            const icon = this.createRotatedLocationIcon(this.state.currentHeading);
-
-            // 如果标记已存在，更新位置和图标
-            if (this.overlays.locationMarker) {
-                this.map.removeOverlay(this.overlays.locationMarker);
-            }
-
-            // 创建新标记
-            this.overlays.locationMarker = new BMapGL.Marker(point, { icon });
-            this.map.addOverlay(this.overlays.locationMarker);
             
-            // 可选：自动跟随定位（取消注释以下代码以启用）
-            // this.map.setCenter(point);
+            console.log('更新定位标记 - 坐标:', lng, lat, '方向:', this.state.currentHeading);
+
+            // 创建带方向的图标（异步加载图片）
+            this.createRotatedLocationIcon(this.state.currentHeading).then((icon) => {
+                // 如果标记已存在，更新位置和图标
+                if (this.overlays.locationMarker) {
+                    this.map.removeOverlay(this.overlays.locationMarker);
+                }
+
+                // 创建新标记
+                this.overlays.locationMarker = new BMapGL.Marker(point, { icon });
+                this.map.addOverlay(this.overlays.locationMarker);
+            }).catch((error) => {
+                console.error('创建定位图标失败:', error);
+            });
         },
 
         /**
@@ -655,18 +799,22 @@
                 navigator.geolocation.getCurrentPosition(
                     (position) => {
                         const { latitude, longitude } = position.coords;
-                        const point = new BMapGL.Point(longitude, latitude);
-                        this.map.centerAndZoom(point, 18);
                         
-                        // 更新当前位置
-                        this.state.currentLocation = {
-                            lat: latitude,
-                            lng: longitude,
-                            accuracy: position.coords.accuracy || 0
-                        };
-                        
-                        // 更新标记
-                        this.updateLocationMarker();
+                        // 将WGS84坐标转换为百度BD09坐标
+                        this.wgs84ToBd09(longitude, latitude, (bd09) => {
+                            const point = new BMapGL.Point(bd09.lng, bd09.lat);
+                            this.map.centerAndZoom(point, 18);
+                            
+                            // 更新当前位置（使用转换后的坐标）
+                            this.state.currentLocation = {
+                                lat: bd09.lat,
+                                lng: bd09.lng,
+                                accuracy: position.coords.accuracy || 0
+                            };
+                            
+                            // 更新标记
+                            this.updateLocationMarker();
+                        });
                     },
                     (error) => {
                         console.warn('获取当前位置失败:', error);
@@ -684,19 +832,72 @@
         },
 
         /**
-         * 创建旋转后的定位图标
+         * 创建旋转后的定位图标（使用 real_postion.png）
          */
         createRotatedLocationIcon(heading) {
+            // 如果图片已缓存，直接使用（返回Promise以保持接口一致性）
+            if (this.locationIconCache && this.locationIconCache.img && this.locationIconCache.img.complete) {
+                return Promise.resolve(this.drawRotatedIcon(this.locationIconCache.img, heading));
+            }
+
+            // 创建图片对象
+            const img = new Image();
+            img.crossOrigin = 'anonymous';
+            
+            // 使用 Promise 等待图片加载
+            return new Promise((resolve) => {
+                img.onload = () => {
+                    // 缓存图片
+                    this.locationIconCache = { img: img };
+                    const icon = this.drawRotatedIcon(img, heading);
+                    resolve(icon);
+                };
+                
+                img.onerror = () => {
+                    // 如果图片加载失败，使用默认图标（不旋转）
+                    console.warn('real_postion.png 加载失败，使用默认图标');
+                    const iconSize = 30;
+                    const defaultIcon = new BMapGL.Icon('./image/real_postion.png', new BMapGL.Size(iconSize, iconSize), {
+                        anchor: new BMapGL.Size(iconSize / 2, iconSize / 2)
+                    });
+                    resolve(defaultIcon);
+                };
+                
+                // 加载图片
+                img.src = './image/real_postion.png';
+            });
+        },
+
+        /**
+         * 在Canvas上绘制旋转后的图标
+         */
+        drawRotatedIcon(img, heading) {
+            // 获取图片原始尺寸
+            const imgWidth = img.naturalWidth || img.width || 30;
+            const imgHeight = img.naturalHeight || img.height || 30;
+            
+            // 计算缩放比例，保持宽高比，最大尺寸为30
+            const maxSize = 30;
+            const scale = Math.min(maxSize / imgWidth, maxSize / imgHeight);
+            const displayWidth = imgWidth * scale;
+            const displayHeight = imgHeight * scale;
+            
+            // Canvas尺寸需要足够大以容纳旋转后的图片（对角线长度）
+            const canvasSize = Math.ceil(Math.max(displayWidth, displayHeight) * Math.sqrt(2));
             const canvas = document.createElement('canvas');
-            canvas.width = 40;
-            canvas.height = 40;
+            canvas.width = canvasSize;
+            canvas.height = canvasSize;
             const ctx = canvas.getContext('2d');
 
+            // 设置高质量渲染
+            ctx.imageSmoothingEnabled = true;
+            ctx.imageSmoothingQuality = 'high';
+
             // 保存上下文
             ctx.save();
 
             // 移动到中心点
-            ctx.translate(20, 20);
+            ctx.translate(canvasSize / 2, canvasSize / 2);
 
             // 旋转画布（heading是相对于正北的角度，需要转换为相对于画布的角度）
             // 百度地图中，heading是相对于正北的角度（0-360），顺时针为正
@@ -704,35 +905,16 @@
             const rotation = (heading - 90) * Math.PI / 180; // 转换为弧度并调整方向
             ctx.rotate(rotation);
 
-            // 绘制圆形背景
-            ctx.fillStyle = '#3388ff';
-            ctx.beginPath();
-            ctx.arc(0, 0, 15, 0, Math.PI * 2);
-            ctx.fill();
-
-            // 绘制白色边框
-            ctx.strokeStyle = '#ffffff';
-            ctx.lineWidth = 3;
-            ctx.beginPath();
-            ctx.arc(0, 0, 15, 0, Math.PI * 2);
-            ctx.stroke();
-
-            // 绘制方向箭头（向上）
-            ctx.fillStyle = '#ffffff';
-            ctx.beginPath();
-            ctx.moveTo(0, -15);
-            ctx.lineTo(-8, -5);
-            ctx.lineTo(8, -5);
-            ctx.closePath();
-            ctx.fill();
+            // 绘制图片（居中，保持原始宽高比）
+            ctx.drawImage(img, -displayWidth / 2, -displayHeight / 2, displayWidth, displayHeight);
 
             // 恢复上下文
             ctx.restore();
 
             // 转换为图片URL
             const iconUrl = canvas.toDataURL();
-            return new BMapGL.Icon(iconUrl, new BMapGL.Size(40, 40), {
-                anchor: new BMapGL.Size(20, 20)
+            return new BMapGL.Icon(iconUrl, new BMapGL.Size(canvasSize, canvasSize), {
+                anchor: new BMapGL.Size(canvasSize / 2, canvasSize / 2)
             });
         },
 
@@ -743,30 +925,46 @@
             // 绑定方法，确保在事件监听器中能正确访问 this
             this.handleOrientation = this.handleOrientation.bind(this);
             
+            console.log('开始监听设备方向...');
+            
             // 检查是否支持 DeviceOrientationEvent
             if (typeof DeviceOrientationEvent !== 'undefined' && typeof DeviceOrientationEvent.requestPermission === 'function') {
                 // iOS 13+ 需要请求权限
+                console.log('请求设备方向权限...');
                 DeviceOrientationEvent.requestPermission()
                     .then(response => {
                         if (response === 'granted') {
+                            console.log('设备方向权限已授予');
                             window.addEventListener('deviceorientation', this.handleOrientation);
+                        } else {
+                            console.warn('设备方向权限被拒绝');
                         }
                     })
-                    .catch(console.error);
+                    .catch(error => {
+                        console.error('请求设备方向权限失败:', error);
+                    });
             } else if (window.DeviceOrientationEvent) {
                 // 其他设备直接监听
+                console.log('直接监听设备方向事件');
                 window.addEventListener('deviceorientation', this.handleOrientation);
             } else {
+                console.log('DeviceOrientationEvent不支持，尝试使用uni-app Compass API');
                 // 如果不支持，尝试使用 Compass API（uni-app）
                 if (typeof plus !== 'undefined' && plus.compass) {
                     this.state.watchOrientationId = plus.compass.watchHeading(
                         (heading) => {
-                            this.state.currentHeading = heading.magneticHeading;
-                            this.updateLocationMarker();
+                            const newHeading = heading.magneticHeading;
+                            if (Math.abs(newHeading - this.state.currentHeading) > 1) {
+                                this.state.currentHeading = newHeading;
+                                console.log('方向更新（来自Compass）:', newHeading);
+                                this.updateLocationMarker();
+                            }
                         },
                         (error) => console.error('获取方向失败:', error),
                         { frequency: 100 }
                     );
+                } else {
+                    console.warn('设备方向功能不可用');
                 }
             }
         },
@@ -776,9 +974,24 @@
          */
         handleOrientation(event) {
             // alpha: 绕Z轴旋转（指南针方向，0-360度）
-            if (event.alpha !== null && event.alpha !== undefined) {
-                this.state.currentHeading = event.alpha;
-                this.updateLocationMarker();
+            // 注意：某些设备可能使用不同的属性
+            let newHeading = null;
+            
+            if (event.alpha !== null && event.alpha !== undefined && !isNaN(event.alpha)) {
+                newHeading = event.alpha;
+            } else if (event.webkitCompassHeading !== null && event.webkitCompassHeading !== undefined) {
+                // iOS Safari 可能使用 webkitCompassHeading
+                newHeading = event.webkitCompassHeading;
+            }
+            
+            if (newHeading !== null && !isNaN(newHeading)) {
+                // 只有当方向变化超过1度时才更新，避免频繁更新
+                const oldHeading = this.state.currentHeading;
+                if (Math.abs(newHeading - oldHeading) > 1 || oldHeading === 0) {
+                    this.state.currentHeading = newHeading;
+                    console.log('方向更新:', newHeading, '度');
+                    this.updateLocationMarker();
+                }
             }
         },