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>

      <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode:'fc2724b3c96a7f244b2211f05c5264be',
        }
      </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;
          }
      </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>
          </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>
      <script type="text/javascript">
          var windowsArr = [];
var markers = [];
var 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>");

  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); //關鍵字查詢查詢

    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,
          });
          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();
  }
});

      </script>
{% endblock %}