麻烦老师检查一下看看哪里需要优化

来源：3-12 自由编程

武桜

2020-02-14 18:45:04

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=6a583f73d783657c4860dd875180a952"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #container {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
    .box {
      width: 360px;
      height: 360px;
      position: absolute;
      top: 10px;
      left: 10px;
      background-color: #fff;
      box-shadow: 3px 3px 10px #000;
      padding: 10px;
    }
    .box .title {
      text-align: center;
      padding: 5px;
    }
    .searCity,
    .setZoom {
      padding: 5px;
      margin: 0 10px 0 5px;
    }
    .city,
    .zoom {
      margin-bottom: 10px;
      float: right;
    }
    .btn1,
    .btn2 {
      width: 60px;
      height: 30px;
      background-color: #1868FB;
      border: none;
      color: #fff;
    }
    .clear {
      width: 120px;
      height: 30px;
      background-color: #CECED0;
      border: none;
      position: relative;
      left: 120px;
    }
    .footer {
      position: absolute;
      right: 0;
      bottom: 0;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <div class="box">
    <h3 class="title">工具栏</h3>
    <div class="city">
      <label for="">搜索城市</label><input type="text" id="searCity" class="searCity"><button class="btn1" id="btn1">确定</button>
    </div>
    <div class="zoom">
      <label for="">设置显示级别</label><input type="text" id="setMyZoom" class="setZoom"><button class="btn2" id="btn2">确定</button>
    </div>
    <button id="clear" class="clear">解除范围限制</button>
    <div class="footer">
      当前所在省/直辖市：<span id="getCity"></span>
    </div>
  </div>

  <script>
    var map = new AMap.Map('container');
    var myBounds = new AMap.Bounds([116.22422,39.813285], [116.567542,39.997639]);
    var searCity = document.getElementById('searCity');
    var setMyZoom = document.getElementById('setMyZoom');
    var btn1 = document.getElementById('btn1');
    var btn2 = document.getElementById('btn2');
    var clear = document.getElementById('clear');
    var getCity = document.getElementById('getCity');
    var mark = false;

    // 设置显示范围
    map.setBounds(myBounds);
    // 限制显示范围
    map.setLimitBounds(myBounds);

    map.getCity(function (e) {
      getCity.innerHTML = e.province + '/' + e.district;
    })

    // 搜索城市
    btn1.onclick = function () {
      map.clearLimitBounds();
      clear.innerHTML = '已解除范围限制';
      map.setCity(searCity.value);
    }

    // 设置显示级别
    btn2.onclick = function () {
      map.setZoom(setMyZoom.value);
    }

    // 设置范围限制
    clear.onclick = function () {
      mark = !mark;
      if (mark == true) {
        map.setLimitBounds(map.getBounds());
        clear.innerHTML = '解除范围限制';
      }else {
        map.clearLimitBounds();
        clear.innerHTML = '已解除范围限制';
      }
    }

    // 鼠标点击设置当前为中心点
    map.on('click', function (e) {
      map.setCenter([e.lnglat.lng, e.lnglat.lat])
    })

    // 鼠标拖动触发事件在工具栏显示省、市
    map.on('moveend', function () {
      map.getCity(function (e) {
        getCity.innerHTML = e.province + '/' + e.district;
      })
    })
    
  </script>
</body>
</html>

写回答

1回答