NewEduCoderBuild/teachers.html

<!doctype html>
<html lang="zh-CN">

<head>
  <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/misc/PositionPicker/examples/positionPicker.html -->
  <base href="//webapi.amap.com/ui/1.1/ui/misc/PositionPicker/examples/" />
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title>拖拽选址</title>
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
      width: 100%;
      padding: 0;
      overflow: hidden;
      font-size: 13px;
    }

    .map {
      height: 100%;
      width: 100%;
      float: left;
    }

    #right {
      color: #444;
      background-color: #f8f8f8;
      width: 0%;
      float: left;
      height: 0%;
    }

    #start,
    #stop,
    #right input {
      margin: 4px;
      margin-left: 15px;
    }

    .title {
      width: 100%;
      background-color: #dadada
    }

    button {
      border: solid 1px;
      margin-left: 15px;
      background-color: #dadafa;
    }

    .c {
      font-weight: 600;
      padding-left: 15px;
      padding-top: 4px;
    }

    #pickerBox {
      position: absolute;
      z-index: 9999;
      top: 0;
      text-align: center;
      background: #fff;
      width: 100%;
      padding: 0px;

    }

    #buttonok {
      position: absolute;
      z-index: 9999;
      bottom: 20px;
      text-align: center;
      width: 80%;
      left: 15%;

    }

    #pickerInput {
      width: 99%;
      padding: 5px 5px;
      height: 48px;
      border: 0px;
      /* border-radius: 20px; */
    }

    #poiInfo {
      background: #fff;
    }

    .amap_lib_placeSearch .poibox.highlight {
      background-color: #CAE1FF;
    }

    .amap_lib_placeSearch .poi-more {
      display: none !important;
    }

    #lnglat,
    #address,
    #nearestJunction,
    #nearestRoad,
    #nearestPOI,
    .title {
      padding-left: 15px;
    }
  </style>
</head>

<body>
  <div id="container" class="map" tabindex="0"></div>
  <div id='right'>
    <div>
      <div class='title'>选择模式</div>
      <input type='radio' name='mode' value='dragMap' checked>拖拽地图模式</input>
      </br>
      <input type='radio' name='mode' value='dragMarker'>拖拽Marker模式</input>
    </div>
    <div>
      <button id='start'>开始选点</button>
      <button id='stop'>关闭选点</button>
    </div>


  </div>
  </div>
  <div id="pickerBox">
    <input id="pickerInput" placeholder="请输入签到地点" />
    <div id="poiInfo"></div>
  </div>
  <div id="buttonok" style="width: 60%;height: 48px;">
    <button
      style="width: 100%;height: 48px;border: none; background: #25a4ff; color: #fff;border-radius: 15px;cursor: pointer;">确定</button>
  </div>

  <script type="text/javascript">
    window._AMapSecurityConfig = {
      serviceHost: 'http://localhost:8000/_AMapService',
      securityJsCode: 'cd2d30eb0306c1e356e5acb4584a3df4'
    }
  </script>
  <script type="text/javascript"
    src='//webapi.amap.com/maps?v=2.0&key=e4088b0a75957fc806662185b69f9ba6&plugin=AMap.ToolBar,AMap.CircleEditor'></script>

  <script type="text/javascript">
    var userAgent = navigator.userAgent;
    if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
      // 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
      document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
    }
  </script>
  <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>


  <!-- UI组件库 1.0 -->
  <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
  <script type="text/javascript">
    let time = '';
    let getposition = '';
    var circle;
    let aa = window.location.search.substr(1);
    let bb = aa.split('&')
    document.addEventListener('UniAppJSBridgeReady', function () { })
    AMapUI.loadUI(['misc/PositionPicker', 'misc/PoiPicker'], function (PositionPicker, PoiPicker) {
      AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker) {

        var poiPicker = new PoiPicker({
          //city:'北京',
          input: 'pickerInput'
        });

        //初始化poiPicker
        poiPickerReady(poiPicker);
      });
      var map = new AMap.Map('container', {
        zoom: 16,
        scrollWheel: false
      })
      AMap.plugin('AMap.Geolocation', function () {
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true,//是否使用高精度定位，默认:true
          timeout: 10000,          //超过10秒后停止定位，默认：5s
          buttonPosition: 'LB',    //定位按钮的停靠位置
          showButton: false,//是否显示定位按钮
          buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
          showCircle: false,
        });

        map.addControl(geolocation);
        geolocation.getCurrentPosition(function (status, result) {
          if (status == 'complete') {
            let ff = bb[0].split('=')[1];
            if (ff) {


              let ee = ff.split(',')
              let item1 = parseFloat(ee[0])
              let item2 = parseFloat(ee[1])
              getposition = [item1, item2]
            } else {
              getposition = [result.position.lng, result.position.lat]
            }
            map.setCenter(getposition)
            circle = new AMap.Circle({
              center: getposition,
              radius: bb[1].split('=')[1], //半径
              borderWeight: 1,
              strokeOpacity: 1,
              strokeOpacity: 0.2,
              fillOpacity: 0.4,
            })
            circle.setMap(map)
            // 缩放地图到合适的视野级别
            map.setFitView([circle])
            positionPicker.start(getposition)
            // positionPicker.start();

          } else {
            console.log('---', result);
            onError(result)
          }
        });
      });

      function poiPickerReady(poiPicker) {

        window.poiPicker = poiPicker;

        var marker = new AMap.Marker();

        var infoWindow = new AMap.InfoWindow({
          offset: new AMap.Pixel(0, -20)
        });

        //选取了某个POI
        poiPicker.on('poiPicked', function (poiResult) {

          var source = poiResult.source,
            poi = poiResult.item,
            info = {
              source: source,
              id: poi.id,
              name: poi.name,
              location: poi.location.toString(),
              address: poi.address
            };
          marker.setPosition(poi.location);
          positionPicker.start(poi.location)
          // console.log('----', poiResult);
          map.setCenter(marker.getPosition());
        });

        poiPicker.onCityReady(function () {
          poiPicker.suggest('');
        });
      }
      var positionPicker = new PositionPicker({
        mode: 'dragMarker',
        map: map
      });


      positionPicker.on('success', function (positionResult) {
        time = positionResult;
        let getpositions = [time.position.lng, time.position.lat]
        circle.setCenter(getpositions)

      });


      var startButton = document.getElementById('buttonok');
      startButton.addEventListener('click', function () {
        uni.postMessage({
          data: {
            action: window.JSON.stringify(time)
          }
        });
        uni.navigateBack()


      })

      positionPicker.on('fail', function (positionResult) {

      });


      positionPicker.start();
      map.panBy(0, 1);

      map.addControl(new AMap.ToolBar({
        liteStyle: true
      }))
    });
  </script>

</body>

</html>