这样可以吗

来源：3-12 自由编程

unbreakable_全栈

2020-12-22 22:58:13

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
   <title>Document</title>
   <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=951ee9f152a075a6b2585694cb2d8a1a">
   </script>
   <style>
      * {
         margin: 0;
         padding: 0;
      }

      #container {
         width: 100%;
         height: 100%;
         position: absolute;
         top: 0;
         left: 0;
      }

      #setZoomNode, #setCenterNode {
         width: 400px;
         height: 200px;
         position: absolute;
         z-index: 99;
         top: 20px;
         right: 20px;
         border: 1px solid black;
         box-shadow: 0 0 5px black;
         background-color: white;
      }
      #setCenterNode {
         top: 20px;
      }
      #setCurCenterNode {
         position: absolute;
         right: 20px;
         bottom: 20px;
      }
   </style>
</head>

<body>
   <div id="container"></div>
   <div id="setCenterNode">
      
      

      <div>地图的右上角坐标：<span id="ne"></span></div>
      <div>地图的左下角坐标：<span id="sw"></span></div>
      <div>目前鼠标的经纬度是：<span id="xyNode"></span></div>
      <input type="text" id="searchNode">
      <button id="btn">确定</button>
      <input type="text" id="zoomVal">
      <button id="setRank">设置级别</button>
      <button id="clearAndSetLimitBounds">清除范围</button>
      <div id="setCurCenterNode"></div>
   </div>
   <script>
      var map = new AMap.Map('container', {
         zoom: 10, // 初始的地图级别
         center: [116.377127,39.934442] // 初始化地图的中心点
      })

      // // langitude 经度
      // // latitude  纬度
      // map.on('click', function (e) {
      //    // console.log(e.lnglat)
      //    // xyNode.innerHTML = e.lnglat.lng + ', ' + e.lnglat.lat
      //    map.setCenter([e.lnglat.lng, e.lnglat.lat])
      // })

      // console.log(map.getBounds())
      // console.log(map.getBounds().northeast.toString())
      // ne.innerHTML = map.getBounds().northeast
      // sw.innerHTML = map.getBounds().southwest

      //设置地图当前显示的范围为北京市
      map.setCity('北京市')

      // 限制地图显示范围只能在北京市
      var myBounds = new AMap.Bounds([115.350598,39.523634], [117.459973,40.284233])
      map.setLimitBounds(myBounds) //但是不是特别精准，会以它觉得最好的方式去显示

      // 编写搜索城市的功能 ,在输入框中输入城市名称 ,点击确定按钮 ,地图显示当前输入的城市。
      btn.onclick = function () {
         map.setCity(searchNode.value)
      }

      // 设置显示级别 , 在输入框中输入地图级别 ,点击确定按钮 , 地图显示当前设置的级别
      setRank.onclick = function () {
         map.setZoom(zoomVal.value) // 可以手动去设定他的级别
      }

      // 设置范围限制的按钮 ,并为其绑定点击事件。当点击时 , 解除范围限制 .再次点击时 , 限制范围显示
      clearAndSetLimitBounds.onclick = function () {
         clearAndSetLimitBounds.innerHTML = clearAndSetLimitBounds.innerHTML === '清除范围' ? '设置范围' : '清除范围'
         if (clearAndSetLimitBounds.innerHTML === '清除范围') {
            map.setLimitBounds(myBounds)
         } else {
            clearAndSetLimitBounds.innerHTML = '设置范围'
            // 清除设定的显示范围
            map.clearLimitBounds();
            return
         }
      }

      // 为地图绑定点击事件 , 在事件中获取到鼠标点击时的经纬度 ,并把当前获取的经纬度设置为当前的中心点
      map.on('click', function (e) {
         xyNode.innerHTML = e.lnglat.lng + ', ' + e.lnglat.lat
         map.setCenter([e.lnglat.lng, e.lnglat.lat])
      })

      // 通过事件来给予地图当前中心点的位置（行政区）
      // btn.onclick = function () {
      //    map.setCity(cityNode.value)
      // }

      // 获取当前位置的行政区
      // map.getCity(function (info) {
      //    // console.log(info)
      //    setCenterNode.innerHTML = info.province + ',' + info.district
      // })

      // 通过事件来一起给予级别，中心点
      // btn.onclick = function () {
      //    map.setZoomAndCenter(zoomVal.value, [xNode.value, yNode.value])
      // }

      // console.log(map.getZoom())
      // console.log(map.getCenter().toString())

      // // 中心点和层级一起去设定
      // setTimeout(() => {
      //    map.setZoomAndCenter(12, [121.22, 30])
      // }, 5000)

      // 通过事件来给予中心点
      // btn1.onclick = function () {
      //    map.setCenter([xNode.value, yNode.value])
      // }

      // btn2.onclick = function () {
      //    map.setZoom(zoomVal.value)
      // }

      // // 设置地图的中心点
      // setTimeout(() => {
      //    map.setCenter([121.222, 30])
      // }, 5000)

      // 设置地图的级别
      // setTimeout(() => {
      //    map.setZoom(15)
      // }, 5000)

      // 通过事件来给它设定级别
      // btn.onclick = function () {
      //    map.setZoom(zoomVal.value)
      // }

      map.on('moveend', function () {
         ne.innerHTML = map.getBounds().northeast
         sw.innerHTML = map.getBounds().southwest
         // console.log(map.getZoom())
         // console.log(map.getCenter().toString())
         map.getCity(function (info) {
            // console.log(info)
            setCurCenterNode.innerHTML = '当前所在省/直辖市：' + info.province + ',' + info.district
         })
      })

      // 地图级别改变时触发的一个事件
      map.on('zoomend', function () {
         ne.innerHTML = map.getBounds().northeast
         sw.innerHTML = map.getBounds().southwest
         // console.log(map.getZoom())
         // console.log(map.getCenter().toString())
      })
   </script>
</body>

</html>