From 64ae3e310f14cea81451a57f2a0b9868296af5ef 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: Fri, 28 Mar 2025 19:35:42 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=BC=E8=88=AA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 RELEASES.md                                   |   8 +-
 .../templates/amap_addr_input.html            | 328 ++++++++++--------
 2 files changed, 192 insertions(+), 144 deletions(-)

diff --git a/RELEASES.md b/RELEASES.md
index 217553d..5bb0ece 100644
--- a/RELEASES.md
+++ b/RELEASES.md
@@ -1,10 +1,4 @@
-致谢：
-刘京文 （马自达阿特兹）
-CYF （捷达vs7）
-Mr.one 马威
-
-交流学习：知识星球 -> openpilot知识库
-
+致谢：刘京文 （马自达阿特兹）CYF （捷达vs7）Mr.one 马威 交流学习：知识星球 -> openpilot知识库
 
 Version 0.9.9
 ========================
diff --git a/selfdrive/frogpilot/fleetmanager/templates/amap_addr_input.html b/selfdrive/frogpilot/fleetmanager/templates/amap_addr_input.html
index f77237c..9125e79 100644
--- a/selfdrive/frogpilot/fleetmanager/templates/amap_addr_input.html
+++ b/selfdrive/frogpilot/fleetmanager/templates/amap_addr_input.html
@@ -15,12 +15,6 @@
       <script src="https://cdn.jsdelivr.net/npm/uikit@3.9.2/dist/js/uikit.min.js"></script>
       <script src="https://cdn.jsdelivr.net/npm/uikit@3.9.2/dist/js/uikit-icons.min.js"></script>
 
-      <script type="text/javascript">
-        window._AMapSecurityConfig = {
-            securityJsCode:'fc2724b3c96a7f244b2211f05c5264be',
-        }
-      </script>
-
       <style type="text/css">
           body {
               margin: 0;
@@ -67,149 +61,209 @@
           .amap-info-content {
               font-size: 12px;
           }
+
+          #map-section {
+              display: none;
+          }
       </style>
 
-      <script type="text/javascript"
-          src="https://webapi.amap.com/maps?v=1.4.2&key=faf2f8ab406a8da1231ef7e10d501b65"></script>
-
-      <!-- Rest of the HTML body content -->
-      <div class="uk-grid-match uk-grid-small uk-text-center" uk-grid>
-          <div class="uk-width-1-3@m">
-              <select id="save_type" class="uk-select">
-                  <option value="recent">最近</option>
-                  <option value="home">住家</option>
-                  <option value="work">工作</option>
-              </select>
+      <!-- 添加 API 密钥输入表单 -->
+      <div id="api-keys-section" class="uk-card uk-card-default uk-card-body uk-margin-bottom">
+          <h3 class="uk-card-title">请输入高德地图 API 密钥</h3>
+          <div class="uk-margin">
+              <label class="uk-form-label" for="security-js-code">安全密钥 (Security JS Code):</label>
+              <input class="uk-input" type="text" id="security-js-code" placeholder="请输入 securityJsCode">
           </div>
-          <div class="uk-width-expand@m">
-              <input class="uk-input" type="text" id="keyword" name="keyword"
-                  placeholder="请输入关键字：(选定后搜索)" onfocus='this.value=""' />
+          <div class="uk-margin">
+              <label class="uk-form-label" for="api-key">API 密钥 (Key):</label>
+              <input class="uk-input" type="text" id="api-key" placeholder="请输入 API key">
           </div>
+          <button class="uk-button uk-button-primary" id="load-map-btn">加载地图</button>
       </div>
-      <input type="hidden" id="longitude" />
-      <input type="hidden" id="latitude" />
-      <div style="height: 600px" id="container"></div>
+
+      <!-- 地图和搜索区域 -->
+      <div id="map-section">
+          <div class="uk-grid-match uk-grid-small uk-text-center" uk-grid>
+              <div class="uk-width-1-3@m">
+                  <select id="save_type" class="uk-select">
+                      <option value="recent">最近</option>
+                      <option value="home">住家</option>
+                      <option value="work">工作</option>
+                  </select>
+              </div>
+              <div class="uk-width-expand@m">
+                  <input class="uk-input" type="text" id="keyword" name="keyword"
+                      placeholder="请输入关键字：(选定后搜索)" onfocus='this.value=""' />
+              </div>
+          </div>
+          <input type="hidden" id="longitude" />
+          <input type="hidden" id="latitude" />
+          <div style="height: 600px" id="container"></div>
+      </div>
+
       <script type="text/javascript">
+          // 全局变量声明
           var windowsArr = [];
-var markers = [];
-var map = new AMap.Map("container", {
-  resizeEnable: true,
-  center: [{{lat}}, {{lon}}], //地图中心点
-  zoom: 13, //地图显示的缩放级别
-  keyboardEnable: false,
-});
+          var markers = [];
+          var map = null;
+          var infoWindow = null;
+          var autocomplete = null;
+          var initMapFunction = function() {
+              windowsArr = [];
+              markers = [];
+              map = new AMap.Map("container", {
+                  resizeEnable: true,
+                  center: [{{lat}}, {{lon}}],
+                  zoom: 13,
+                  keyboardEnable: false
+              });
 
-var infoWindow;
-function openInfo(name, addr, lng, lat) {
-  //构建信息窗体中显示的内容
-  var info = [];
-  info.push('<div class="uk-card uk-card-default uk-card-body">');
-  info.push('<a class="uk-card-badge uk-label" onClick="javascript:infoWindow.close()" uk-close></a>');
-  info.push("<h3 style=\"padding-top: 10px;\" class=\"uk-card-title\">" + name + "</h3>");
-  info.push("<p>" + addr + "</p>");
-  info.push('<div class="uk-card-footer">');
-  info.push('<form name="navForm" method="post">');
-  info.push('  <input type="hidden" name="lat" value="' + lat + '">');
-  info.push('  <input type="hidden" name="lon" value="' + lng + '">');
-  info.push('  <input type="hidden" name="save_type" value="' + document.getElementById("save_type").value + '">');
-  info.push('  <input type="hidden" name="name" value="' + name + '">');
-  info.push('  <input class="uk-button uk-button-primary" type="submit" value="导航" >');
-  info.push('</form>');
-  info.push('</div>');
-  info.push("</div>");
+              // 定义打开信息窗体的函数
+              function openInfo(name, addr, lng, lat) {
+                  // 构建信息窗体中显示的内容
+                  var info = [];
+                  info.push('<div class="uk-card uk-card-default uk-card-body">');
+                  info.push('<a class="uk-card-badge uk-label" onClick="javascript:infoWindow.close()" uk-close></a>');
+                  info.push("<h3 style=\"padding-top: 10px;\" class=\"uk-card-title\">" + name + "</h3>");
+                  info.push("<p>" + addr + "</p>");
+                  info.push('<div class="uk-card-footer">');
+                  info.push('<form name="navForm" method="post">');
+                  info.push('  <input type="hidden" name="lat" value="' + lat + '">');
+                  info.push('  <input type="hidden" name="lon" value="' + lng + '">');
+                  info.push('  <input type="hidden" name="save_type" value="' + document.getElementById("save_type").value + '">');
+                  info.push('  <input type="hidden" name="name" value="' + name + '">');
+                  info.push('  <input class="uk-button uk-button-primary" type="submit" value="导航" >');
+                  info.push('</form>');
+                  info.push('</div>');
+                  info.push("</div>");
 
-  var pos = new AMap.LngLat(lng, lat)
-  infoWindow = new AMap.InfoWindow({
-    position: pos,
-    isCustom: true,
-    offset: new AMap.Pixel(0, -30),
-    content: info.join(""), //使用默认信息窗体框样式，显示信息内容
-  });
+                  var pos = new AMap.LngLat(lng, lat);
+                  infoWindow = new AMap.InfoWindow({
+                      position: pos,
+                      isCustom: true,
+                      offset: new AMap.Pixel(0, -30),
+                      content: info.join("") // 使用默认信息窗体框样式，显示信息内容
+                  });
 
-  infoWindow.open(map, pos);
-}
-AMap.plugin(["AMap.Autocomplete", "AMap.PlaceSearch"], function () {
-  var autoOptions = {
-    city: "全国", //城市，默认全国
-    input: "keyword", //使用联想输入的input的id
-  };
-  autocomplete = new AMap.Autocomplete(autoOptions);
-  var placeSearch = new AMap.PlaceSearch({
-    map: "",
-  });
-  AMap.event.addListener(autocomplete, "select", function (e) {
-    //TODO 针对选中的poi实现自己的功能
-    //重寫搜尋點及其提示資訊begin=====
-    placeSearch.setCity(e.poi.adcode);
-    if (e.poi && e.poi.location) {
-      map.setZoom(17);
-      map.setCenter(e.poi.location);
-    }
-    placeSearch.search(e.poi.name, check_dest); //關鍵字查詢查詢
+                  infoWindow.open(map, pos);
+              }
 
-    function check_dest(status, result) {
-      if (status === "complete" && result.info === "OK") {
-        for (var h = 0; h < result.poiList.pois.length; h++) {
-          //返回搜尋列表迴圈繫結marker
-          var jy = result.poiList.pois[h]["location"]; //經緯度
-          var name = result.poiList.pois[h]["name"]; //地址
-          marker = new AMap.Marker({
-            //加點
-            map: map,
-            position: jy,
+              // 加载插件
+              AMap.plugin(["AMap.Autocomplete", "AMap.PlaceSearch"], function() {
+                  var autoOptions = {
+                      city: "全国", // 城市，默认全国
+                      input: "keyword" // 使用联想输入的input的id
+                  };
+                  autocomplete = new AMap.Autocomplete(autoOptions);
+                  var placeSearch = new AMap.PlaceSearch({
+                      map: ""
+                  });
+
+                  // 添加选择事件监听器
+                  AMap.event.addListener(autocomplete, "select", function(e) {
+                      // 重写搜索点及其提示信息
+                      placeSearch.setCity(e.poi.adcode);
+                      if (e.poi && e.poi.location) {
+                          map.setZoom(17);
+                          map.setCenter(e.poi.location);
+                      }
+                      placeSearch.search(e.poi.name, check_dest); // 关键字查询
+
+                      function check_dest(status, result) {
+                          if (status === "complete" && result.info === "OK") {
+                              for (var h = 0; h < result.poiList.pois.length; h++) {
+                                  // 返回搜索列表循环绑定marker
+                                  var jy = result.poiList.pois[h]["location"]; // 经纬度
+                                  var name = result.poiList.pois[h]["name"]; // 地址
+                                  var marker = new AMap.Marker({ // 加点
+                                      map: map,
+                                      position: jy
+                                  });
+                                  marker.extData = {
+                                      getLng: jy["lng"],
+                                      getLat: jy["lat"],
+                                      name: name,
+                                      address: result.poiList.pois[h]["address"]
+                                  }; // 自定义传入的参数
+
+                                  marker.on("click", function(e) {
+                                      var hs = e.target.extData;
+                                      openInfo(
+                                          hs["name"],
+                                          hs["address"],
+                                          hs["getLng"],
+                                          hs["getLat"]
+                                      );
+                                  });
+                                  markers.push(marker);
+                              }
+                          }
+                      }
+                  });
+              });
+
+              // 添加地图点击事件
+              map.on('click', function(e) {
+                  map.remove(markers);
+                  document.getElementById('longitude').value = e.lnglat.getLng();
+                  document.getElementById('latitude').value = e.lnglat.getLat();
+                  var lnglatXY = [e.lnglat.getLng(), e.lnglat.getLat()];
+                  var marker = new AMap.Marker({
+                      map: map,
+                      position: lnglatXY
+                  });
+                  marker.extData = {
+                      getLng: e.lnglat.getLng(),
+                      getLat: e.lnglat.getLat()
+                  };
+
+                  marker.on("click", function(e) {
+                      var hs = e.target.extData;
+                      openInfo(
+                          "",
+                          "(" + hs["getLat"] + ", " + hs["getLng"] + ")",
+                          hs["getLng"],
+                          hs["getLat"]
+                      );
+                  });
+                  markers.push(marker);
+                  if (typeof(infoWindow) != "undefined") {
+                      infoWindow.close();
+                  }
+              });
+          }
+
+          document.getElementById('load-map-btn').addEventListener('click', function() {
+              var securityJsCode = document.getElementById('security-js-code').value;
+              var apiKey = document.getElementById('api-key').value;
+
+              if (!securityJsCode || !apiKey) {
+                  alert('请输入安全密钥和 API 密钥');
+                  return;
+              }
+
+              // 设置安全配置
+              window._AMapSecurityConfig = {
+                  securityJsCode: securityJsCode
+              };
+
+              // 加载高德地图 API
+              var script = document.createElement('script');
+              script.type = 'text/javascript';
+              script.src = 'https://webapi.amap.com/maps?v=1.4.2&key=' + apiKey;
+              script.onload = function() {
+                  initMapFunction();
+              };
+              document.head.appendChild(script);
+
+              // 显示地图区域
+              document.getElementById('api-keys-section').style.display = 'none';
+              document.getElementById('map-section').style.display = 'block';
           });
-          marker.extData = {
-            getLng: jy["lng"],
-            getLat: jy["lat"],
-            name: name,
-            address: result.poiList.pois[h]["address"],
-          }; //自定義想傳入的引數
-
-          marker.on("click", function (e) {
-            var hs = e.target.extData;
-            var content = openInfo(
-              hs["name"],
-              hs["address"],
-              hs["getLng"],
-              hs["getLat"]
-            );
-          });
-          markers.push(marker);
-        }
-      }
-    }
-    //重寫搜尋點及其提示資訊end=====
-  });
-});
-var clickEventListener = map.on('click', function(e)  {
-  map.remove(markers);
-  document.getElementById('longitude').value = e.lnglat.getLng();
-  document.getElementById('latitude').value = e.lnglat.getLat();
-  lnglatXY = [e.lnglat.getLng(), e.lnglat.getLat()];
-  var marker = new AMap.Marker({
-    //加點
-    map: map,
-    position: lnglatXY,
-  });
-  marker.extData = {
-    getLng: e.lnglat.getLng(),
-    getLat: e.lnglat.getLat(),
-  }; //自定義想傳入的引數
-
-  marker.on("click", function (e) {
-    var hs = e.target.extData;
-    var content = openInfo(
-      "",
-      "(" + hs["getLat"] + ", " + hs["getLng"] + ")",
-      hs["getLng"],
-      hs["getLat"]
-    );
-  });
-  markers.push(marker);
-  if (typeof(infoWindow) != "undefined") {
-    infoWindow.close();
-  }
-});
 
+          // 初始化地图的函数
+          function initMap() {
+              initMapFunction();
+          }
       </script>
 {% endblock %}