老师,为什么设置限制范围没有作用?

老师,为什么设置限制范围没有作用?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>111</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=a29a2eee0ee2be00b070f0f26f7b39a5"></script> 
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
        #box{
            width: 400px;
            height: 150px;
            position: absolute;
            right: 20px;
            top: 30px;
            background: #fff;
            border: 1px solid #eee;
            box-shadow: 0 0 5px #000;
        }
    </style>
</head>
<body>
    <div id="container"></div> 
    <div id="box">
        <!-- <input type="text"  id="city">
        <button id="btn">确定</button> -->
        <div>地图的右上角坐标:<span id="ne"></span></div>
        <div>地图的左下角坐标:<span id="sw"></span></div>
    </div>
    <script>
        var box=document.getElementById("box");
        var city=document.getElementById("city");
        var btn=document.getElementById("btn");

        var map=new AMap.Map("container",{
            zooom:5,//初始化地图的级别
            center:[120,30] //初始化地图的中心点
        });
        
        //获取地图的显示范围 northeast右上角坐标 southwest左下角坐标
        console.log(map.getBounds());

        //地图移动结束后显示范围
        map.on("moveend",function(){
            ne.innerHTML=map.getBounds().northeast.toString();
            sw.innerHTML=map.getBounds().southwest.toString();
        });

        //设置地图的显示范围,先new一个对象,参数内填左下角坐标的数组,右上角坐标的数组
        //var myBounds=new AMap.Bounds([124.637894,30.333631],[119.397812,29.607949]);
        //map.setBounds(myBounds); //不是特别精准

        //限制地图的显示范围
        var boundslimit=map.getBounds();//获取当前的地图显示范围map
        //允许左右移动一部分
        boundslimit.northeast.R=122;//允许右上角最大移动到126
        map.setLimitBounds(boundslimit);
        //map.clearLimitBounds();//清除限制
    </script>
</body>
</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
不明道理 2019-10-01 00:19:47

把68行代码的R改成Q

好帮手慕码 2019-09-23 19:16:32

同学你好!

测试是版本问题,建议使用老师视频里的:

http://img1.sycdn.imooc.com//climg/5d88a97b0954b93c08340156.jpg

效果:

http://img1.sycdn.imooc.com//climg/5d88a98609ec88ac03380056.jpg

如果帮助到了你,欢迎采纳,祝学习愉快~

好帮手慕码 2019-09-23 18:37:09

同学你好!

测试代码,限制范围的效果是有的哦:

http://img1.sycdn.imooc.com//climg/5d88a04e098336c209690431.jpg

把地图向左滑动,还是会弹出来显示杭州,同学可以再测试一下。

如果帮到了你,欢迎采纳,祝学习愉快~

  • 老师,我是设定了最大的限制是122,但是它到120就不能在向右动了
    2019-09-23 18:38:55
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师