请问一下老师，为什么解除限制后，就实现不了只限制在北京范围内的效果

来源：3-12 自由编程

weixin_慕先生7015352

2020-10-20 19:13:45

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
     <meta name="viewport" content="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=ce32bba4e74c48d6bc07087c757d66c2"></script>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #container {
            width:100%;
             height: 100%;
             position:absolute;
             left:0px;
             top:0px;
        }
        #toolbar{
            width:400px;
            height:200px;
            position:absolute;
            z-index:99;
            left:20px;
            top:20px;
            border:1px solid black;
            box-shadow: 0 0 5px black;
            background:#fff;
            padding:10px 20px;
        }
        #title{
            text-align:center;
        }
        .line1{
            text-indent: 2em;
            margin: 10px 0;
        }
        #cityNode,#zoomNode{
            width: 140px;
            height: 20px;
        }
        #btn1,#btn2{
            width: 48px;
            height: 24px;
            line-height: 24px;
            background-color: skyblue;
            color: #fff;
            border: none;
            margin-left: 10px;
        }
        #limit{
            margin: 10px 0 0 117px;
            padding: 7px 10px;
            background-color: #eee;
            border: none;
        }

        .line2{
            position: absolute;
            bottom: 10px;
            right: 100px;
        }

    </style>
</head>
<body>
    <div id="container"></div>
    <div id="toolbar">
        <h3  id="title">工具栏</h3>
        <div class="line1">
            搜索城市：
            <input type="text" id="cityNode">
            <button id="btn1">确定</button>
        </div>
        <div>
            设置显示级别：
            <input type="text" id="zoomNode">
            <button id="btn2">确定</button>
        </div>
        <button type="text" id="limit" >解除范围限制</button>
        <div class="line2">当前所在省/直辖市:<span id="nowcity"></span></div>
    </div>

    <script>
         var map=new AMap.Map('container',{
            zoom:10,  // 初始的地图级别
            center:[120,30]  // 初始化地图中心点
        });

        var cityNode=document.querySelector('#cityNode');
        var btn1=document.querySelector('#btn1');

        var zoomNode=document.querySelector('#zoomNode');
        var btn2=document.querySelector('#btn2');

        var nowcity=document.querySelector('#nowcity');
        var limit=document.querySelector('#limit');
        var limitbln=true;

        // 设置显示范围
        var mybounds=new AMap.Bounds([116.567542,39.997639],[116.22422,39.813285]);
        map.setBounds(mybounds);
        // console.log(map.getBounds());

        // 设置限制范围
        var bounds=map.getBounds();
        map.setLimitBounds(bounds);


        // 解除范围限制
        limit.onclick=function(){
            limitbln=!limitbln;
            // console.log(limitbln);

            if(limitbln==false){
                map.clearLimitBounds();
                limit.innerHTML='已经解除限制';
            }else{
                var bounds=map.getBounds();
                map.setLimitBounds(bounds);
                limit.innerHTML='请先解除限制';
            }
        };

        // 搜索城市
        btn1.onclick=function(){
            map.setCity(cityNode.value);
        };

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

        // 获取经纬度
        map.on('click',function(e){
            var lnglat=e.lnglat.lng+','+e.lnglat.lat;
            map.setCenter([e.lnglat.lng,e.lnglat.lat]);
        });

        // 当前所在省/直辖市
        map.on('moveend',function(){
            map.getCity(function(info){
                nowcity.innerHTML=info.province;
            })
        });

        // 请问一下老师，为什么这样写不能实现只限制在北京范围的效果呢？
        // var bounds=map.setBounds([116.567542,39.997639],[116.22422,39.813285]);
        // map.setLimitBounds(bounds);

    </script>
</body>
</html>
在这里输入代码，可通过选择【代码语言】突出显示