老师,请检查

来源：3-12 自由编程

weibo_执著的弧线_0

2019-10-14 21:15:07

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>自由编程</title>
   <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=fa587136f2f835dda3a721ac96f1274e"></script>
   <style type="text/css">
      *{
         margin: 0;
         padding:0;
      }
      #content{
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
      }
      #toolPannel{
         width: 350px;
         height: 400px;
         position: absolute;
         top:20px;
         left: 20px;
         z-index: 3;
         background: #fff;
         box-shadow: #000 2px 2px;
      }
      #toolPannel h3{
         text-align: center;
         margin-top: 10px;
      }
      #toolPannel span{
         text-align: right;
         display: inline-block;
         width: 100px;
         line-height: 30px;
      }
      #toolPannel input{
         text-align: left;
         height: 30px;
         width: 150px;
         margin-left: 4px;
      }
      #toolPannel div{
         margin-top: 20px;
      }
      #toolPannel #btnSubmit1,#toolPannel #btnSubmit2{
         height: 30px;
         background: #00f;
         color: #fff;
         width: 50px;
         margin-left: 5px;
         border: none;
      }
      #toolPannel #btnCancel{
         height: 30px;
         width: 100px;
         margin-top: 10px;
         border: none;
         margin-left: 104px;
      }
      #toolPannel #tips{
         margin-top: 190px;
         margin-left: 140px;
      }
      #toolPannel #tips #cityNow{
         width: 50px;
      }
   </style>
</head>
<body>
   <div id="content">
      <div id="toolPannel">
         <h3>工具栏</h3>
         <div>
            <span>搜索城市</span><input type="text" id="city"><button id="btnSubmit1">确定</button>
         </div>
         <div>
            <span>设置显示级别</span><input type="text" id="showZoom"><button id="btnSubmit2">确定</button>
         </div>
         <button id="btnCancel">解除范围限制</button>
         <div id="tips">当前所在省/直辖市:<span id="cityNow"></span></div>
      </div>
   </div>
   <script type="text/javascript">
      var map = new AMap.Map('content',{
         center:[116.393771,39.93594],
         zoom:10,
      });
      //设置地图显示范围
 var myBounds = new AMap.Bounds([116.22422,39.813285],[116.567542,39.997639]);
      map.setBounds(myBounds);
      map.setLimitBounds(myBounds);

      //获取城市名称
 var city = document.getElementById('city'),
         //获取提交按钮1
 btnSubmit1 = document.getElementById('btnSubmit1'),
         //获取显示级别
 showZoom = document.getElementById('showZoom'),
         //获取提交按钮2
 btnSubmit2 = document.getElementById('btnSubmit2'),
         //获取取消限制按钮
 btnCancel = document.getElementById('btnCancel'),
         //获取当前所在省直辖市
 cityNow = document.getElementById('cityNow');

      //设置城市
 btnSubmit1.onclick = function () {
         map.setCity(city.value);
      }
      //设置显示等级
 btnSubmit2.onclick = function () {
         map.setZoom(showZoom.value);
      }
      //解除限制
 btnCancel.onclick = function () {
         var limitVal = true;
         if (limitVal) {
            limitVal = false;
            map.clearLimitBounds();
            btnCancel.innerHTML = '限制显示范围';
         }else {
            map.setLimitBounds(myBounds);
            btnCancel.innerHTML = '解除范围限制';
            limitVal = true;
         }
      }

      //设置中心点
 map.on('click',function (e) {
         map.setCenter([e.lnglat.lng,e.lnglat.lat]);
      })

      //当前所在省直辖市
 map.on('moveend',function () {
         map.getCity(function (info) {
            cityNow.innerHTML = info.province;
         })
      })
   </script>
</body>
</html>

写回答

1回答