老师请检查

来源：3-12 自由编程
wsc6016922
2020-09-05 10:38:44
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习1</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=4d5538e3b3313b3f35e0ee66e8b80976"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        #container {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
        
        #setCenterNode {
            width: 350px;
            height: 350px;
            background-color: #fff;
            border: 1px solid #000;
            position: absolute;
            left: 5px;
            top: 5px;
            box-shadow: 0 0 10px #000;
        }
        
        #setCenterNode h2 {
            text-align: center;
            padding-top: 15px;
        }
        
        .search {
            width: 90%;
            margin: 20px auto;
        }
        
        .search p {
            display: inline-block;
            width: 100px;
            text-align: right;
        }
        
        .search input {
            width: 140px;
            height: 25px;
        }
        
        .search button {
            width: 60px;
            height: 30px;
            background-color: rgb(110, 110, 247);
            text-align: center;
            color: #fff;
            cursor: pointer;
        }
        
        .clearLimit {
            width: 120px;
            height: 40px;
            line-height: 40px;
            font-size: 13px;
            text-align: center;
            background-color: #ccc;
            margin: 20px auto;
            position: absolute;
            top: 150px;
            left: 122px;
            cursor: pointer;
        }
        
        .position {
            position: absolute;
            bottom: 5px;
            right: 0px;
        }
        
        .position #cityNode {
            display: inline-block;
            width: 100px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <div id="setCenterNode">
        <h2>工具栏</h2>
        <div class="search">
            <p>搜索城市</p>
            <input type="text" class="cityNameNode">
            <button class="btn_one">确定</button>
        </div>
        <div class="search">
            <p>设置显示级别</p>
            <input type="text" class="levelNode">
            <button class="btn_two">确定</button>
        </div>
        <!--解除限制按钮-->
        <div class="clearLimit">解除地图范围限制</div>
        <!--当前所在位置显示-->
        <div class="position">
            <p>当前所在省/直辖市:<span id="cityNode">北京市</span></p>
        </div>
    </div>

    <script>
        var map = new AMap.Map('container');
        var clearNode = document.querySelector('.clearLimit'),
            clearBln = false, //是否解除了地图限制
            cityNameNode = document.querySelector('.cityNameNode'),
            levelNode = document.querySelector('.levelNode'),
            btn_one = document.querySelector('.btn_one'),
            btn_two = document.querySelector('.btn_two'),
            cityNode = document.querySelector('#cityNode');


        //设置地图显示范围
        var myBounds = new AMap.Bounds([116.22422, 39.813285], [116.567542, 39.997639])
        map.setLimitBounds(myBounds)

        //解除地图范围限制
        clearNode.onclick = function() {
            clearBln = !clearBln;
            if (clearBln == true) {
                this.innerHTML = '已解除范围限制';
                map.clearLimitBounds()
            } else {
                this.innerHTML = '解除地图范围限制';
                map.setLimitBounds(myBounds)
            }
        }

        //搜索城市
        btn_one.onclick = function() {
            map.setCity(cityNameNode.value)
        }

        //设置显示级别
        btn_two.onclick = function() {
            map.setZoom(levelNode.value)
        }

        //把当前点击时的经纬度设置成中心点
        map.on('click', function(e) {
            map.setCenter([e.lnglat.lng, e.lnglat.lat])
        })

        //显示移动后所在城市
        map.on('moveend', function() {
            map.getCity(function(info) {
                console.log(info)
                cityNode.innerHTML = info.province;
            })
        })
    </script>
</body>

</html>
写回答
1回答