From aa52a56bcf73ded50f136377f5c685dd3e93181f Mon Sep 17 00:00:00 2001
From: userGyl <user_gyl@163.com>
Date: Fri, 30 Jan 2026 11:36:33 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E7=9B=B8=E5=85=B3=E7=9A=84?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ln_jq_app/assets/html/map.html | 145 +++++++++++++++++++++++++++++----
 1 file changed, 131 insertions(+), 14 deletions(-)

diff --git a/ln_jq_app/assets/html/map.html b/ln_jq_app/assets/html/map.html
index a9dd60b..6576769 100644
--- a/ln_jq_app/assets/html/map.html
+++ b/ln_jq_app/assets/html/map.html
@@ -32,7 +32,7 @@
         /* --- 搜索栏样式 --- */
         #search-box {
             position: absolute;
-            top: 10px;
+            top: 40px;
             left: 10px;
             right: 10px;
             z-index: 100;
@@ -74,7 +74,7 @@
         /* --- 导航结果面板 (底部弹出) --- */
         #panel {
             position: fixed;
-            bottom: 0;
+            bottom: 75px;
             left: 0;
             width: 100%;
             height: 35%;
@@ -94,7 +94,7 @@
         #location-btn {
             position: fixed;
             right: 10px;
-            bottom: 50px;
+            bottom: 75px;
             /* 默认位置 */
             width: 44px;
             height: 44px;
@@ -121,9 +121,22 @@
             fill: #555;
         }
 
+        /* --- 调整比例尺位置 --- */
+.amap-scalecontrol {
+    /* 初始状态：避开底部的定位按钮或留出安全间距 */
+    bottom: 80px !important; 
+    left: 10px !important;
+    transition: bottom 0.3s ease; /* 增加平滑动画 */
+}
+
+/* --- 当路径规划面板显示时，比例尺自动上移 --- */
+body.panel-active .amap-scalecontrol {
+    bottom: 38% !important; /* 移动到面板上方 (面板高度35% + 3%间距) */
+}
+
         /* --- 关键：当 body 有 panel-active 类时，按钮上移 --- */
         body.panel-active #location-btn {
-            bottom: 38%;
+            bottom: 45%;
             /* 对应 #panel 的 height + 一点间距 */
         }
     </style>
@@ -167,7 +180,7 @@
     </div>
 
     <script>
-        var map, marker, driving, truckDriving, geocoder;
+        var map, marker, destMarker,driving, truckDriving, geocoder;
         var currentLat, currentLng;
         var isTruckMode = false;
         var isInitialLocationSet = false;
@@ -176,7 +189,7 @@
         function initMap() {
             map = new AMap.Map('container', {
                 resizeEnable: true,
-                zoom: 15,
+                zoom: 17,
                 viewMode: '3D'
             });
 
@@ -263,6 +276,7 @@
                             angle: isNaN(rawAngle) ? 0 : rawAngle,
                         });
                         map.setCenter(position);
+                        map.setZoom(13);
                     } else {
                         marker.moveTo(position, {
                             duration: 1000,
@@ -280,9 +294,11 @@
                                 const regeo = result.regeocode;
                                 const addressComponent = regeo.addressComponent;
                                 const pois = regeo.pois;
-                                
-                                console.log("地理："+JSON.stringify(result));
-                                
+
+                                console.log("地理：" + JSON.stringify(result));
+                                fetchStationInfo(addressComponent.province, addressComponent.city,
+                                    addressComponent.district);
+
                                 // 策略1: 优先使用最近的、类型合适的POI的名称
                                 if (pois && pois.length > 0) {
                                     // 查找第一个类型不是“商务住宅”或“地名地址信息”的POI，这类POI通常是具体的建筑或地点名
@@ -297,9 +313,9 @@
                                 }
                                 // 策略2: 如果没有POI，使用"道路+门牌号"
                                 else if (addressComponent.street && addressComponent.streetNumber) {
-                                    shortAddress = addressComponent.district+
-                                    addressComponent.township+
-                                    addressComponent.street + addressComponent.streetNumber;
+                                    shortAddress = addressComponent.district +
+                                        addressComponent.township +
+                                        addressComponent.street + addressComponent.streetNumber;
                                 }
                                 // 策略3: 如果还没有，使用"区+乡镇"
                                 else if (addressComponent.district) {
@@ -333,7 +349,108 @@
         }
 
         /**
-         * 核心功能 2: 点击按钮回到当前位置
+         *  调用后端接口获取站点
+         */
+        function fetchStationInfo(province, city, district) {
+            // 注意：某些直辖市在高德中 city 字段可能为空，需做兼容处理
+            console.log("JS->: 开始请求." + province + city + district);
+            var cityName = (typeof city === 'string' && city.length > 0) ? city : province;
+
+            fetch('https://beta-esg.api.lnh2e.com/appointment/station/getStationInfoByArea', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        // "asoco-token": "e28eada8-4611-4dc2-a942-0122e52f52da"
+                    },
+                    body: JSON.stringify({
+                        province: province,
+                        city: cityName,
+                        district: district
+                    })
+                })
+                .then(response => {
+                    console.log("JS->: 网络状态码:", response.status);
+                    if (!response.ok) {
+                        throw new Error('网络响应错误: ' + response.status);
+                    }
+                    return response.json(); // 解析 JSON
+                })
+                .then(res => {
+                    // 打印完整的返回结果，方便调试观察结构
+                    console.log("JS->: 接口完整返回:", JSON.stringify(res));
+
+                    // 安全校验：判断 res.data 是否存在
+                    if (res.code === 0 && res.data) {
+                        if (res.data.address) {
+                            console.log("JS->: 找到地址:", res.data.address);
+                            var destAddress = res.data.address;
+                            document.getElementById('endInput').value = destAddress;
+                            // 标记终点
+                            markDestination(destAddress, res.data.name || "目的地");
+                        } else {
+                            console.log("JS->: 接口请求成功，但该区域暂无站点地址");
+                        }
+                    } else {
+                        console.log("JS->: 业务报错或无数据:", res.message);
+                    }
+                })
+                .catch(err => console.error('JS->:获取站点信息失败:', err));
+        }
+
+        /**
+         *  地理编码并在地图标记终点
+         */
+        function markDestination(address, name) {
+            geocoder.getLocation(address, function (status, result) {
+                if (status === 'complete' && result.info === 'OK') {
+                    var loc = result.geocodes[0].location;
+
+                    // 1. 清除旧的终点标记
+                    if (destMarker) destMarker.setMap(null);
+
+                    // 2. 创建自定义图标
+                    // 假设图标大小为 32x32，你可以根据实际图片尺寸调整 Size
+                    var destIcon = new AMap.Icon({
+                        size: new AMap.Size(32, 32), // 图标尺寸
+                        image: 'ic_tag.png', // 本地图片路径
+                        imageSize: new AMap.Size(32, 32) // 图片在图标内拉伸的大小
+                    });
+
+                    // 3. 创建标记
+                    destMarker = new AMap.Marker({
+                        map: map,
+                        position: loc,
+                        icon: destIcon, // 使用自定义图标
+                        // 偏移量：如果图标底部中心是尖角，offset 设为宽的一半的负数，高度的负数
+                        // 这样能确保图片的底部尖端指向地图上的精确位置
+                        offset: new AMap.Pixel(-16, -32),
+                        title: name,
+                        label: {
+                            content: '<div style="background:#fff;padding:2px 5px;border:1px solid #3366FF;border-radius:3px;font-size:12px;">' +
+                                name + '</div>',
+                            direction: 'top'
+                        }
+                    });
+
+                    // 4. 打印调试信息
+                    console.log("JS->: 终点标记已添加", address, loc.toString());
+
+                    // 5. 自动调整视野包含起点和终点
+                    // if (marker) {
+                    //     // 如果起点标志已存在，缩放地图以展示两者
+                    //     map.setFitView([marker, destMarker], false, [60, 60, 60, 60]);
+                    // } else {
+                    //     // 如果没有起点，直接跳到终点
+                    //     map.setCenter(loc);
+                    // }
+                } else {
+                    console.error("JS->: 终点地址地理编码失败", address);
+                }
+            });
+        }
+
+        /**
+         * 点击按钮回到当前位置
          */
         function backToLocation() {
             if (currentLng && currentLat) {
@@ -349,7 +466,7 @@
         }
 
         /**
-         * 核心功能 3: 路径规划
+         *  路径规划
          */
         function startRouteSearch() {
             // 获取输入框的文字