carrot/selfdrive/frogpilot/fleetmanager/templates/amap_addr_input.html

{% extends "layout.html" %}

{% block title %}
  amap_addr_input
{% endblock %}
{% block main %}
      <!-- Head section moved into body -->
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
      <title>输入提示后查询</title>
      <!-- UIkit CSS -->
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.9.2/dist/css/uikit.min.css" />
      <!-- UIkit JS -->
      <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>

      <style type="text/css">
          body {
              margin: 0;
              height: 100%;
              width: 100%;
              position: absolute;
          }

          #mapContainer {
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              width: 100%;
              height: 400px;
          }

          #amap-container {
              height: 400px; /* Adjust height as needed */
          }

          .button-group {
              position: absolute;
              bottom: 20px;
              right: 20px;
              font-size: 12px;
              padding: 10px;
          }

          .button-group .button {
              height: 28px;
              line-height: 28px;
              background-color: #0D9BF2;
              color: #FFF;
              border: 0;
              outline: none;
              padding-left: 5px;
              padding-right: 5px;
              border-radius: 3px;
              margin-bottom: 4px;
              cursor: pointer;
          }

          .amap-info-content {
              font-size: 12px;
          }

          #map-section {
              display: none;
          }
      </style>

      <!-- 添加 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-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>

      <!-- 地图和搜索区域 -->
      <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 = 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
              });

              // 定义打开信息窗体的函数
              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("") // 使用默认信息窗体框样式，显示信息内容
                  });

                  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) {
                      // 重写搜索点及其提示信息
                      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';
          });

          // 初始化地图的函数
          function initMap() {
              initMapFunction();
          }
      </script>
{% endblock %}