From b659f68bc868891c331b37ee9dd8a77055422834 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=BA=E6=A2=B0=E5=B0=8F=E9=B8=BD?=
 <128568434+jixiexiaoge@users.noreply.github.com>
Date: Sat, 29 Mar 2025 10:22:28 +0800
Subject: [PATCH] Update tmap_addr_input.html

---
 .../templates/tmap_addr_input.html            | 751 +++++++-----------
 1 file changed, 283 insertions(+), 468 deletions(-)

diff --git a/selfdrive/frogpilot/fleetmanager/templates/tmap_addr_input.html b/selfdrive/frogpilot/fleetmanager/templates/tmap_addr_input.html
index 9a49aea..37c1359 100644
--- a/selfdrive/frogpilot/fleetmanager/templates/tmap_addr_input.html
+++ b/selfdrive/frogpilot/fleetmanager/templates/tmap_addr_input.html
@@ -89,229 +89,319 @@
                   </button>
               </div>
           </div>
-          <div class="uk-margin-small-top">
-              <button class="uk-button uk-button-default uk-button-small" onclick="locateUser()">
-                  <span uk-icon="icon: location"></span> 定位
-              </button>
-              <button class="uk-button uk-button-default uk-button-small" onclick="showSearchHistory()">
-                  <span uk-icon="icon: history"></span> 历史记录
-              </button>
-          </div>
       </div>
 
       <div id="search-results" class="search-results"></div>
       <div id="mapContainer"></div>
 
-      <!-- 更改腾讯地图API引入方式，增加passive参数，可能会减少一些警告 -->
-      <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=BDMBZ-LZQ63-GUG37-OCHES-2ESXV-Q5BVC&libraries=geometry"></script>
+      <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=BDMBZ-LZQ63-GUG37-OCHES-2ESXV-Q5BVC"></script>
 
       <script type="text/javascript">
         var map, marker, infoWindow;
-        var searchTimeout;
         var searchMarkers = [];
         var initialPosition;
 
-        // 修复标记图片URL问题 - 使用腾讯地图官方正确的图标URL
-        var markerIconDefault = 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker.png';
-        var markerIconSelected = 'https://mapapi.qq.com/web/lbs/javascriptV2/javascript/img/marker_red.png';
-        var markerIconSearch = 'https://mapapi.qq.com/web/lbs/javascriptV2/javascript/img/marker_blue.png';
+        // 修改路径以确保能找到图标
+        var markerIconDefault = '../static/marker.png';
+        var markerIconBlue = '../static/marker.png';  // 使用同一个图标
+
+        // 添加Base64编码的备用图标
+        var markerIconDefaultBase64 = 'data:image/png;base64,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';
+        var markerIconBlueBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nnnvuFdcMDA8FDh69Xw8BRQnGyDdCY/X1rVpXb1xdGf2CgufMeiF4fY4QTKwvKRLJBPrDw36bQbH+8Vg54nW5XeaEsaX2XMaoktMsZB9OMWjsmaxjXzM6DtgBq+juYZX9s1gHwbtyXnqBLp7YlOLZFckN2gQsfXo76xvgUOrTCzQDlq4gw+KqmiQvbH+vQP7lJPuaCTjiPuDh/6YQY0OHUKb/mFVnvPBCf0+nbQTQE5hDlgPO6JLyY8d94K5IR1QT0qwzsSWlwP+EsdEdpGgIYleQbLKcNH7Yw+iPZu12L8oRgwYGytKmrJRrGmylMNMqLIpvn71lgM3+HAukaiWHY1Ii3ViHxzu4YkmoELpTyjVF9g0IKCnJnJDJxL8QUJjuOWWmdOYCiNyUmgSwBDeCRJ3BkW582zQy3hKXvZXU18CYGMgjBurq8vLiEgbPgwXRDCRFS2RWYFNG6YBC8oQvZQku2XgEPrRP6RgUAAxlpMZsUD82dTip3VORACNXC2LbXAdCXN/btMD8XocjQFC9n7PjwEO0Dv70l52/Px24k1Buu42t0HDmD5mi7LXwJwiU3gUXB/lKsf0XqDeOlQDTIbUFahVp6neifb2j43OjS0PT9xrZklTPQctAm0MQQUq0mcXd9lKCZefPNnUKk0f5zeD+nj2wMDY0FjnxEjU9ufWQgp4QVvRUGg42O0pj4qDoiXj3TmG5Pm0GXEfBw/HWmDeWLDHcZr7E5xVOkCTygXsUYgXKEEWdTcNR+lklL3ab8F72vKn2Fpf5fJQiJTE0XBMQmYrQDqYmzcaGgXeHH6HE+JGJ4pIrDG/u3BaHU3Z1T+6+vYy+1urNG1Dpeqxw+3GQ5xfuQLrHf/c3yY8+f3lySJgkt1e0VAFMd/5KnL3+NZbXUHfmrLFXcszVsy/Gg5dhuPLNrR11PJGMMICAwJNrwQEfVJZiwwbU4p0EX1HUQSQKUUFXdL00bZJnzAIBBfk/h1trGL+hTfdXQovzqb5m9tnh/OzlOPGx8/uTX39ovVccWq9QhwVQppEXY9Bk/cJv/R8UTxIxkiOuM7CZxo4TqwYcWDNApmyiFOdyDXaQEo0dGMDIgkT8kPz85TOx1tmM4VKWC2adWKsHER+GCSITMRUt5AS7tC1UH6jlv6Zcpj7QAFVLjMelBEUBcphQCI6wgG7fWqxMJ1QxMAXwVdOvRT7NdVesrJoFdVrU+y6UO8jaNrNKiZnKAGDiF0a0jCBHW5N9x5mDTaEejDD2q0v616PntKLd21H9fz1X1u2zHXY6qOZ6KW8D00z/3Loyh/Cx2CbZ8wgyQAAAABJRU5ErkJggg==';
+
+        // 添加图标加载检查
+        function checkImageExists(url, callback) {
+          var img = new Image();
+          img.onload = function() { callback(true); };
+          img.onerror = function() { callback(false); };
+          img.src = url;
+        }
 
         // 初始化地图
         function initMap() {
-            // 修复Jinja变量语法，避免JavaScript解析错误
-            initialPosition = new TMap.LatLng(Number("{{lat}}"), Number("{{lon}}"));
+          // 检查图标是否可用
+          checkImageExists(markerIconDefault, function(exists) {
+            if (!exists) {
+              console.error("图标加载失败，尝试其他路径");
+              // 尝试其他可能的路径
+              markerIconDefault = '/static/marker.png';
+              markerIconBlue = '/static/marker.png';
+
+              // 如果仍然失败，使用Base64编码的图标
+              checkImageExists(markerIconDefault, function(exists) {
+                if (!exists) {
+                  console.error("备用路径也失败，使用Base64图标");
+                  markerIconDefault = markerIconDefaultBase64;
+                  markerIconBlue = markerIconBlueBase64;
+                }
+
+                // 现在初始化地图和标记
+                initMapWithCheckedIcons();
+              });
+            } else {
+              // 图标存在，初始化地图和标记
+              initMapWithCheckedIcons();
+            }
+          });
+        }
+
+        // 使用已检查的图标初始化地图
+        function initMapWithCheckedIcons() {
+          // 使用Number()转换确保经纬度是数字
+          initialPosition = new TMap.LatLng(Number("{{lat}}"), Number("{{lon}}"));
 
             map = new TMap.Map('mapContainer', {
                 center: initialPosition,
                 zoom: 15,
-                showControl: true,
-                viewMode: '2D' // 明确指定2D模式，可能会减少一些警告
+                showControl: true
             });
 
-            // 添加当前位置标记 - 使用正确的图标URL
+          // 创建当前位置标记
             marker = new TMap.MultiMarker({
                 map: map,
                 styles: {
-                    "marker": new TMap.MarkerStyle({
+                  "default": new TMap.MarkerStyle({
                         width: 25,
                         height: 35,
                         anchor: { x: 12.5, y: 35 },
-                        src: markerIconDefault
-                    }),
-                    "selected": new TMap.MarkerStyle({
-                        width: 30,
-                        height: 42,
-                        anchor: { x: 15, y: 42 },
-                        src: markerIconSelected
-                    }),
-                    "searchResult": new TMap.MarkerStyle({
-                        width: 25,
-                        height: 35,
-                        anchor: { x: 12.5, y: 35 },
-                        src: markerIconSearch
+                      src: markerIconDefault
                     })
                 },
                 geometries: [{
                     id: 'current',
                     position: initialPosition,
-                    styleId: 'marker'
+                  styleId: 'default'
                 }]
             });
 
             // 添加点击事件
             map.on('click', handleMapClick);
 
-            // 初始化搜索服务
-            initSearchService();
-        }
-
-        // 初始化搜索服务和联想功能
-        function initSearchService() {
-            // 监听输入框，实现联想搜索
-            var inputElement = document.getElementById('keyword');
-
-            inputElement.addEventListener('input', function() {
-                var keyword = this.value.trim();
-                if (keyword) {
-                    clearTimeout(searchTimeout);
-                    searchTimeout = setTimeout(function() {
-                        searchSuggestion(keyword);
-                    }, 300);
-                } else {
-                    document.getElementById('search-results').style.display = 'none';
-                }
-            });
-
-            // 防止表单提交刷新页面
-            inputElement.form && inputElement.form.addEventListener('submit', function(e) {
-                e.preventDefault();
-                searchPlace(inputElement.value);
-            });
+          // 添加标记点击事件
+          marker.on('click', function(evt) {
+              showInfoWindow(
+                  evt.geometry.position,
+                  "选定位置",
+                  "(" + evt.geometry.position.lat.toFixed(6) + ", " + evt.geometry.position.lng.toFixed(6) + ")"
+              );
+          });
         }
 
         // 处理地图点击
         function handleMapClick(evt) {
             var position = evt.latLng;
 
-            // 清除搜索结果
-            document.getElementById('search-results').style.display = 'none';
+            // 进行坐标逆解析，获取地点信息
+            getAddressByLocation(position, function(result) {
+                // 更新当前位置标记
+                marker.updateGeometries([{
+                    id: 'current',
+                    position: position,
+                    styleId: 'default'
+                }]);
 
-            // 更新标记位置
+                // 使用搜索框文本或逆解析结果显示信息窗口
+                var keyword = document.getElementById('keyword').value;
+                if (keyword && keyword.trim() !== '') {
+                    showInfoWindow(position, keyword, result && result.address);
+                } else if (result && result.address) {
+                    showInfoWindow(position, result.formatted_addresses?.recommend || "选定位置", result.address);
+                } else {
+                    showInfoWindow(position, "选定位置", `(${position.lat.toFixed(6)}, ${position.lng.toFixed(6)})`);
+                }
+
+                // 隐藏搜索结果
+                document.getElementById('search-results').style.display = 'none';
+            });
+        }
+
+        // 根据坐标获取地址信息
+        function getAddressByLocation(location, callback) {
+            var callbackName = 'jsonp_reverseGeo_' + Math.round(100000 * Math.random());
+
+            window[callbackName] = function(res) {
+                // 移除script标签
+                var scriptTags = document.getElementsByTagName('script');
+                for (var i = 0; i < scriptTags.length; i++) {
+                    if (scriptTags[i].src.indexOf(callbackName) > -1) {
+                        document.body.removeChild(scriptTags[i]);
+                        break;
+                    }
+                }
+
+                if (res.status === 0 && res.result) {
+                    callback(res.result);
+                } else {
+                    callback(null);
+                }
+
+                // 清理回调函数
+                delete window[callbackName];
+            };
+
+            // 构建请求URL
+            var url = "https://apis.map.qq.com/ws/geocoder/v1/?location=" +
+                location.lat + "," + location.lng +
+                "&key=BDMBZ-LZQ63-GUG37-OCHES-2ESXV-Q5BVC&output=jsonp&callback=" + callbackName;
+
+            // 发送JSONP请求
+            var script = document.createElement('script');
+            script.src = url;
+            script.onerror = function() {
+                callback(null);
+                delete window[callbackName];
+            };
+            document.body.appendChild(script);
+        }
+
+        // 显示搜索结果
+        function displaySearchResults(places) {
+            if (!places || places.length === 0) return;
+
+            // 清除之前的搜索标记
+            clearSearchMarkers();
+
+            // 准备标记数据
+            var geometries = [];
+
+            // 创建结果标记
+            places.forEach(function(place, index) {
+                var position = new TMap.LatLng(place.location.lat, place.location.lng);
+
+                geometries.push({
+                    id: 'search_' + index,
+                    position: position,
+                    styleId: 'default',
+                    properties: {
+                        title: place.title,
+                        address: place.address
+                    }
+                });
+            });
+
+            // 创建标记图层 - 使用蓝色水滴图标
+            var resultMarker = new TMap.MultiMarker({
+                map: map,
+                styles: {
+                    "default": new TMap.MarkerStyle({
+                        width: 25,
+                        height: 35,
+                        anchor: { x: 12.5, y: 35 },
+                        src: markerIconBlue // 使用蓝色图标
+                    })
+                },
+                geometries: geometries
+            });
+
+            // 添加点击事件
+            resultMarker.on('click', function(evt) {
+                var position = evt.geometry.position;
+                var props = evt.geometry.properties;
+
+                // 使用正确的标题和地址信息
+                showInfoWindow(position, props.title, props.address);
+
+                // 更新当前标记
             marker.updateGeometries([{
                 id: 'current',
                 position: position,
-                styleId: 'marker'
-            }]);
+                    styleId: 'default'
+                }]);
 
-            // 对于地图点击，设置一个默认地名 "选定位置"
-            var coordsText = "(" + position.lat.toFixed(6) + ", " + position.lng.toFixed(6) + ")";
-            showInfoWindow(position, "选定位置", coordsText);
+                // 隐藏搜索结果
+                document.getElementById('search-results').style.display = 'none';
+            });
+
+            // 保存到标记数组用于后续清除
+            searchMarkers.push(resultMarker);
+
+            // 调整地图视野以包含所有标记
+            if (places.length === 1) {
+                // 单个结果直接定位
+                map.setCenter(geometries[0].position);
+                map.setZoom(16);
+
+                // 自动打开信息窗口
+                showInfoWindow(
+                    geometries[0].position,
+                    places[0].title,
+                    places[0].address
+                );
+            } else {
+                // 多个结果时调整视野包含所有标记
+                var bounds = new TMap.LatLngBounds();
+                geometries.forEach(function(geo) {
+                    bounds.extend(geo.position);
+                });
+                map.fitBounds(bounds);
+
+                // 显示提示
+                UIkit.notification({
+                    message: `找到 ${places.length} 个结果，请点击标记查看详情`,
+                    status: 'success',
+                    pos: 'top-center',
+                    timeout: 3000
+                });
+            }
         }
 
-        // 显示信息窗口 - 使用搜索框文本作为地名
-        function showInfoWindow(position, name, addr) {
+        // 显示信息窗口
+        function showInfoWindow(position, title, address) {
             if (infoWindow) {
                 infoWindow.close();
             }
 
-            // 获取搜索框的值作为地名
-            var searchText = document.getElementById('keyword').value.trim();
-            var placeName = searchText || name || "选定位置";
+            // 获取真实的地点名称和地址
+            var placeName = title || document.getElementById('keyword').value || "选定位置";
+            var placeAddress = address || `(${position.lat.toFixed(6)}, ${position.lng.toFixed(6)})`;
 
-            // 调试输出
-            console.log("显示信息窗口，搜索框文本:", searchText, "名称:", name, "地址:", addr, "使用地名:", placeName);
+            console.log("显示信息窗口:", placeName, placeAddress);
 
+            // 创建信息窗口
             infoWindow = new TMap.InfoWindow({
                 map: map,
                 position: position,
                 content: `
-                    <div class="uk-card uk-card-default uk-card-body" style="padding:10px; min-width:200px;">
-                        <a class="uk-card-badge uk-label" onClick="javascript:infoWindow.close()" uk-close></a>
-                        <h3 style="padding-top: 10px;" class="uk-card-title">${name || ""}</h3>
-                        <p>${addr || ""}</p>
-                        <div class="uk-card-footer" style="padding-top:10px;">
-                            <form name="navForm" method="post">
-                                <input type="hidden" name="lat" value="${position.lat}">
-                                <input type="hidden" name="lon" value="${position.lng}">
-                                <input type="hidden" name="save_type" value="${document.getElementById('save_type').value}">
-                                <input type="hidden" name="place_name" value="${placeName}">
-                                <input class="uk-button uk-button-primary" type="submit" value="导航" onclick="console.log('导航表单提交，地点名:', '${placeName}')">
-                            </form>
+                    <div class="uk-card uk-card-default uk-card-body" style="padding:15px; min-width:220px;">
+                        <h3 style="margin-top:0; margin-bottom:10px; font-size:16px; font-weight:bold;">${placeName}</h3>
+                        <p style="margin:0; color:#666; font-size:14px;">${placeAddress}</p>
+                        <div style="margin-top:15px; text-align:center;">
+                        <form name="navForm" method="post" onsubmit="return validateNavForm()">
+                            <input type="hidden" name="lat" value="${position.lat}">
+                            <input type="hidden" name="lon" value="${position.lng}">
+                            <input type="hidden" name="save_type" value="${document.getElementById('save_type').value}">
+                            <input type="hidden" id="place_name_field" name="place_name" value="${placeName}">
+                            <input class="uk-button uk-button-primary" type="submit" value="导航" style="width:100px;">
+                        </form>
                         </div>
                     </div>
                 `,
                 offset: { x: 0, y: -35 }
             });
+
+            // 打开信息窗口
+            infoWindow.open();
         }
 
-        // 修改搜索联想函数，添加错误处理
-        function searchSuggestion(keyword) {
-            console.log("搜索联想：", keyword);
+        // 验证导航表单确保地名被传递
+        function validateNavForm() {
+            var placeNameField = document.getElementById('place_name_field');
 
-            // 避免使用可能导致跨域问题的XMLHttpRequest
-            // 直接使用JSONP方法，这是最可靠的
-            var script = document.createElement('script');
-            var callbackName = 'jsonp_suggestion_' + Math.round(100000 * Math.random());
-
-            window[callbackName] = function(res) {
-                console.log("联想搜索结果：", res);
-                if (script.parentNode) document.body.removeChild(script);
-                delete window[callbackName];
-
-                if (res.status === 0 && res.data && res.data.length > 0) {
-                    showSuggestionResults(res.data);
-                } else {
-                    document.getElementById('search-results').style.display = 'none';
+            // 如果地名为空，尝试从搜索框获取
+            if (!placeNameField.value || placeNameField.value === "选定位置") {
+                var keyword = document.getElementById('keyword').value;
+                if (keyword && keyword.trim() !== '') {
+                    placeNameField.value = keyword;
+                    console.log("从搜索框获取地名:", keyword);
                 }
-            };
-
-            var suggestUrl = "https://apis.map.qq.com/ws/place/v1/suggestion?keyword=" +
-                            encodeURIComponent(keyword) +
-                            "&key=BDMBZ-LZQ63-GUG37-OCHES-2ESXV-Q5BVC&output=jsonp&callback=" + callbackName;
-
-            script.src = suggestUrl;
-            document.body.appendChild(script);
-
-            // 添加超时处理
-            setTimeout(function() {
-                if (window[callbackName]) {
-                    console.error("联想搜索请求超时");
-                    document.getElementById('search-results').style.display = 'none';
-                    if (script.parentNode) document.body.removeChild(script);
-                    delete window[callbackName];
-                }
-            }, 5000);
-        }
-
-        // 显示搜索联想结果
-        function showSuggestionResults(results) {
-            var container = document.getElementById('search-results');
-            container.innerHTML = '';
-
-            if (results && results.length > 0) {
-                results.forEach(function(result) {
-                    var div = document.createElement('div');
-                    div.className = 'search-result-item';
-                    div.innerHTML = `
-                        <div class="uk-text-bold">${result.title}</div>
-                        <div class="uk-text-small uk-text-muted">${result.address || ''}</div>
-                    `;
-
-                    div.onclick = function() {
-                        // 获取详细信息
-                        getPlaceDetail(result.id);
-                    };
-
-                    container.appendChild(div);
-                });
-
-                container.style.display = 'block';
-            } else {
-                container.style.display = 'none';
             }
+
+            // 调试输出
+            console.log("提交导航表单，地名:", placeNameField.value);
+            return true;
         }
 
-        // 修改搜索函数，添加错误处理
+        // 搜索地点
         function searchPlace(keyword) {
             if (!keyword || keyword.trim() === '') {
                 UIkit.notification({
@@ -323,7 +413,7 @@
                 return;
             }
 
-            // 显示加载提示和调试信息
+            // 显示加载提示
             console.log("开始搜索：", keyword);
             UIkit.notification({
                 message: '正在搜索...',
@@ -332,37 +422,29 @@
                 timeout: 2000
             });
 
-            // 使用唯一的回调函数名称避免冲突
-            var callbackName = 'jsonp_search_' + Math.round(100000 * Math.random());
-            var script = document.createElement('script');
+            // 清除之前的标记
+            clearSearchMarkers();
 
+            // 创建JSONP回调
+            var callbackName = 'jsonp_search_' + Math.round(100000 * Math.random());
+
+            // 定义回调函数
             window[callbackName] = function(res) {
                 console.log("搜索结果：", res);
-                if (script.parentNode) document.body.removeChild(script);
-                delete window[callbackName];
 
+                // 移除script标签
+                var scriptTags = document.getElementsByTagName('script');
+                for (var i = 0; i < scriptTags.length; i++) {
+                    if (scriptTags[i].src.indexOf(callbackName) > -1) {
+                        document.body.removeChild(scriptTags[i]);
+                        break;
+                    }
+                }
+
+                // 处理搜索结果
                 if (res.status === 0 && res.data && res.data.length > 0) {
-                    // 转换返回的数据格式
-                    var places = res.data.map(function(item) {
-                        return {
-                            id: item.id,
-                            title: item.title,
-                            address: item.address,
-                            location: {
-                                lat: item.location.lat,
-                                lng: item.location.lng
-                            }
-                        };
-                    });
-
-                    // 显示搜索结果列表
-                    showSearchResults(places);
-
-                    // 在地图上显示多个标记点
-                    showMultipleMarkers(places);
-
-                    // 调整地图视野以包含所有结果
-                    fitMapToBounds(places);
+                    // 显示搜索结果
+                    displaySearchResults(res.data);
                 } else {
                     UIkit.notification({
                         message: '未找到相关结果',
@@ -371,310 +453,43 @@
                         timeout: 3000
                     });
                 }
+
+                // 清理回调函数
+                delete window[callbackName];
             };
 
+            // 构建搜索请求URL
             var searchUrl = "https://apis.map.qq.com/ws/place/v1/search?keyword=" +
-                            encodeURIComponent(keyword) +
-                            "&boundary=region(全国,0)" +
-                            "&page_size=10" +
-                            "&page_index=1" +
-                            "&key=BDMBZ-LZQ63-GUG37-OCHES-2ESXV-Q5BVC&output=jsonp&callback=" + callbackName;
-
-            script.src = searchUrl;
-            document.body.appendChild(script);
-
-            // 添加超时处理
-            setTimeout(function() {
-                if (window[callbackName]) {
-                    console.error("搜索请求超时");
-                    UIkit.notification({
-                        message: '搜索超时，请重试',
-                        status: 'danger',
-                        pos: 'top-center',
-                        timeout: 3000
-                    });
-                    if (script.parentNode) document.body.removeChild(script);
-                    delete window[callbackName];
-                }
-            }, 5000);
-        }
-
-        // 修改获取地点详情函数
-        function getPlaceDetail(id) {
-            var detailUrl = "https://apis.map.qq.com/ws/place/v1/detail?id=" +
-                            encodeURIComponent(id) +
-                            "&key=BDMBZ-LZQ63-GUG37-OCHES-2ESXV-Q5BVC&output=jsonp&callback=detailCallback";
+                encodeURIComponent(keyword) +
+                "&boundary=region(全国,0)" +
+                "&page_size=10" +
+                "&page_index=1" +
+                "&key=BDMBZ-LZQ63-GUG37-OCHES-2ESXV-Q5BVC&output=jsonp&callback=" + callbackName;
 
+            // 发送JSONP请求
             var script = document.createElement('script');
-            script.src = detailUrl;
-            document.body.appendChild(script);
-
-            // 定义全局回调函数
-            window.detailCallback = function(res) {
-                console.log("地点详情：", res);
-                document.body.removeChild(script);
-
-                if (res.status === 0 && res.data) {
-                    // 转换数据格式
-                    var place = {
-                        id: res.data.id,
-                        title: res.data.title,
-                        address: res.data.address,
-                        location: {
-                            lat: res.data.location.lat,
-                            lng: res.data.location.lng
-                        }
-                    };
-
-                    selectPlace(place);
-                } else {
-                    UIkit.notification({
-                        message: '获取地点详情失败',
-                        status: 'danger',
-                        pos: 'top-center',
-                        timeout: 3000
-                    });
-                }
-            };
-        }
-
-        // 选择地点
-        function selectPlace(place) {
-            var position = new TMap.LatLng(place.location.lat, place.location.lng);
-
-            // 更新地图视图
-            map.setCenter(position);
-            map.setZoom(16);
-
-            // 更新标记
-            marker.updateGeometries([{
-                id: 'current',
-                position: position,
-                styleId: 'selected'
-            }]);
-
-            // 显示信息窗口
-            showInfoWindow(position, place.title, place.address);
-
-            // 保存到历史记录
-            saveSearchHistory(place);
-
-            // 隐藏搜索结果
-            document.getElementById('search-results').style.display = 'none';
-        }
-
-        // 在地图上显示多个标记点 - 修复图标URL
-        function showMultipleMarkers(places) {
-            // 清除之前的搜索结果标记
-            clearSearchMarkers();
-            console.log("显示多个标记点：", places.length);
-
-            // 准备新的标记点数据
-            var geometries = [];
-
-            places.forEach(function(place, index) {
-                // 确保所有必要属性存在
-                if (!place.location || !place.location.lat || !place.location.lng) {
-                    console.error("地点数据不完整：", place);
-                    return;
-                }
-
-                var position = new TMap.LatLng(place.location.lat, place.location.lng);
-
-                geometries.push({
-                    id: 'search_' + index,
-                    position: position,
-                    styleId: 'searchResult',
-                    properties: {
-                        title: place.title || "",
-                        address: place.address || ""
-                    }
-                });
-            });
-
-            console.log("创建几何标记：", geometries.length);
-
-            // 创建新的标记点图层 - 使用正确的图标URL
-            if (geometries.length > 0) {
-                try {
-                    var searchResultMarker = new TMap.MultiMarker({
-                        map: map,
-                        styles: {
-                            "searchResult": new TMap.MarkerStyle({
-                                width: 25,
-                                height: 35,
-                                anchor: { x: 12.5, y: 35 },
-                                src: markerIconSearch
-                            })
-                        },
-                        geometries: geometries
-                    });
-
-                    // 添加点击事件
-                    searchResultMarker.on('click', function(evt) {
-                        var properties = evt.geometry.properties;
-                        var position = evt.geometry.position;
-
-                        // 显示信息窗口
-                        showInfoWindow(position, properties.title, properties.address);
-
-                        // 更新当前选中标记
-                        marker.updateGeometries([{
-                            id: 'current',
-                            position: position,
-                            styleId: 'selected'
-                        }]);
-                    });
-
-                    // 保存到搜索标记数组
-                    searchMarkers.push(searchResultMarker);
-                    console.log("标记创建成功");
-                } catch (error) {
-                    console.error("创建标记时出错：", error);
-                }
-            }
-        }
-
-        // 清除搜索结果标记
-        function clearSearchMarkers() {
-            searchMarkers.forEach(function(markerLayer) {
-                markerLayer.setMap(null);
-            });
-            searchMarkers = [];
-        }
-
-        // 调整地图视野以包含所有结果
-        function fitMapToBounds(places) {
-            if (!places || places.length === 0) return;
-
-            // 如果只有一个结果，直接定位到该位置
-            if (places.length === 1) {
-                var position = new TMap.LatLng(places[0].location.lat, places[0].location.lng);
-                map.setCenter(position);
-                map.setZoom(16);
-                return;
-            }
-
-            // 计算包含所有结果的视野范围
-            var bounds = new TMap.LatLngBounds();
-            places.forEach(function(place) {
-                bounds.extend(new TMap.LatLng(place.location.lat, place.location.lng));
-            });
-
-            // 设置地图视野
-            map.fitBounds(bounds, {
-                padding: 100  // 设置边距，避免标记点太靠近边缘
-            });
-        }
-
-        // 显示搜索结果 - 修复版本
-        function showSearchResults(results) {
-            console.log("显示搜索结果列表：", results.length);
-
-            var container = document.getElementById('search-results');
-            container.innerHTML = '';
-
-            if (results && results.length > 0) {
-                results.forEach(function(result) {
-                    var div = document.createElement('div');
-                    div.className = 'search-result-item';
-                    div.innerHTML = `
-                        <div class="uk-text-bold">${result.title || ""}</div>
-                        <div class="uk-text-small uk-text-muted">${result.address || ""}</div>
-                    `;
-
-                    div.onclick = function() {
-                        selectSearchResult(result);
-                    };
-
-                    container.appendChild(div);
-                });
-
-                container.style.display = 'block';
-            } else {
-                container.style.display = 'none';
-            }
-        }
-
-        // 添加用户定位功能
-        function locateUser() {
-            if (navigator.geolocation) {
-                navigator.geolocation.getCurrentPosition(
-                    (position) => {
-                        const userPosition = new TMap.LatLng(position.coords.latitude, position.coords.longitude);
-                        map.setCenter(userPosition);
-                        marker.updateGeometries([{
-                            id: 'current',
-                            position: userPosition,
-                            styleId: 'selected'
-                        }]);
-                    },
-                    (error) => {
-                        UIkit.notification({
-                            message: '无法获取您的位置，请检查位置权限',
-                            status: 'warning',
-                            pos: 'top-center',
-                            timeout: 3000
-                        });
-                    }
-                );
-            } else {
+            script.src = searchUrl;
+            script.onerror = function() {
                 UIkit.notification({
-                    message: '您的浏览器不支持地理定位',
+                    message: '搜索请求失败，请检查网络连接',
                     status: 'danger',
                     pos: 'top-center',
                     timeout: 3000
                 });
-            }
+                delete window[callbackName];
+            };
+            document.body.appendChild(script);
         }
 
-        // 添加历史记录功能
-        function saveSearchHistory(item) {
-            let history = JSON.parse(localStorage.getItem('searchHistory') || '[]');
-            // 避免重复添加
-            history = history.filter(h => h.title !== item.title);
-            history.unshift(item);
-            // 最多保存10条记录
-            if (history.length > 10) history.pop();
-            localStorage.setItem('searchHistory', JSON.stringify(history));
-        }
-
-        function showSearchHistory() {
-            const history = JSON.parse(localStorage.getItem('searchHistory') || '[]');
-            if (history.length > 0) {
-                showSearchResults(history);
-            }
-        }
-
-        // 选择搜索结果 - 确保title正确传递
-        function selectSearchResult(result) {
-            // 调试输出
-            console.log("选择搜索结果:", result);
-
-            const position = new TMap.LatLng(result.location.lat, result.location.lng);
-
-            // 更新地图视图
-            map.setCenter(position);
-            map.setZoom(16);
-
-            // 更新标记
-            marker.updateGeometries([{
-                id: 'current',
-                position: position,
-                styleId: 'selected'
-            }]);
-
-            // 确保传递完整的title和address
-            showInfoWindow(position, result.title || "", result.address || "");
-
-            // 保存到历史记录
-            saveSearchHistory(result);
-
-            // 隐藏搜索结果
-            document.getElementById('search-results').style.display = 'none';
+        // 清除搜索标记
+        function clearSearchMarkers() {
+            searchMarkers.forEach(function(marker) {
+                marker.setMap(null);
+            });
+            searchMarkers = [];
         }
 
         // 初始化地图
         initMap();
       </script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}