请老师检查

来源：3-12 自由编程

慕运维0332677

2020-02-29 19:57:53

//创建地图 设置基础展开等级及地图中心
var map = new AMap.Map('container',{
    zoom:11,
    center:[116.39,39.91]
});


//设置地图的范围
//先创建一个范围的地图实例，然后将他传递到setBounds()方法中。
var myBounds = new AMap.Bounds([116.22422,39.813285],[116.567542,39.997639]);
map.setBounds(myBounds);


//实现搜索城市，地图转移到目标区域
cityConfirm.onclick = function(){
    if(!cityNode.value)return;
    var cityVal = cityNode.value;
    map.setCity(cityVal);
    map.getCity(function(info){
        local.innerHTML = info.province;
    });
    // local.innerHTML = map.getCity().province;
}

//设置地图展开等级
zoomConfirm.onclick = function(){
    var zoomVal = zoomNode.value;
    map.setZoom(zoomVal);
}

//默认限制地图的显示范围
//先获取显示范围，在设置限制显示范围
var isLimit = true;
function setLimit(){
    var bounds = map.getBounds();
    bounds.northeast.R = 116.567542;
    bounds.northeast.P = 39.997639;
    bounds.southwest.R = 116.22422;
    bounds.southwest.P = 39.813285;
    map.setLimitBounds(bounds); 
    isLimit = false;
};
setLimit();

//点击实现接触限制范围
btn.onclick = function(){
    if(isLimit == false){
       map.clearLimitBounds(); 
       btn.innerHTML = "已解除限制范围";
       isLimit = true;
    }else{
        setLimit();
        btn.innerHTML = "解除限制范围";
    }    
}

//鼠标点击设置地图中心
map.on('click',function(event){
    map.setCenter([event.lnglat.lng,event.lnglat.lat]);
});

//鼠标滑动结束，显示当前省及行政区
map.on('moveend',function(){
    map.getCity(function(info){
        local.innerHTML = info.province + "," + info.district;
    });
})

写回答

2回答

好帮手慕言

2020-03-01

已采纳

同学你好，效果是正确的，继续加油，祝学习愉快~

慕运维0332677

提问者

2020-02-29

以下是详细代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的地图</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=195dad3d2c8b1be12c9d0968da7fdd25">
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

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

        .box {
            width: 400px;
            height: 400px;
            position: absolute;
            left: 0;
            top: 20px;
            background: #fff;
            box-shadow: #000 0 5px 5px 0;
        }

        .box h3 {
            text-align: center;
            margin-top: 20px;
        }

        .box p {
            height: 50px;
            line-height: 50px;
        }

        .box p span {
            display: inline-block;
            width: 110px;
            height: 100%;
            text-align: right;
        }

        .box p input {
            width: 170px;
            height: 24px;
        }

        .box p a {
            display: inline-block;
            width: 40px;
            line-height: 28px;
            height: 28px;
            background: #007acc;
            text-decoration: none;
            text-align: center;
            color: #fff;
            vertical-align: middle;
        }

        #btn {
            width: 120px;
            height: 30px;
            position: absolute;
            top: 150px;
            left: 110px;
        }

        .box p:last-child {
            position: absolute;
            bottom: 20px;
            right: 50px;
            height: 30px;
            line-height: 30px;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <div class="box">
        <h3>工具栏</h3>
        <p>
            <span>搜索城市:</span>
            <input type="text" id="cityNode">
            <a href="#" id="cityConfirm">确定</a>
        </p>
        <p>
            <span>设置显示级别:</span>
            <input type="text" id="zoomNode">
            <a href="#" id="zoomConfirm">确定</a>
        </p>
        <button id="btn">解除限制范围</button>
        <p>当前所在省/直辖市：<span id="local"></span></p>
    </div>
    <script>
        
    //创建地图 设置基础展开等级及地图中心
    var map = new AMap.Map('container',{
        zoom:11,
        center:[116.39,39.91]
    });


    //设置地图的范围
    //先创建一个范围的地图实例，然后将他传递到setBounds()方法中。
    var myBounds = new AMap.Bounds([116.22422,39.813285],[116.567542,39.997639]);
    map.setBounds(myBounds);


    //实现搜索城市，地图转移到目标区域
    cityConfirm.onclick = function(){
        if(!cityNode.value)return;
        var cityVal = cityNode.value;
        map.setCity(cityVal);
        map.getCity(function(info){
            local.innerHTML = info.province;
        });
        // local.innerHTML = map.getCity().province;
    }

    //设置地图展开等级
    zoomConfirm.onclick = function(){
        var zoomVal = zoomNode.value;
        map.setZoom(zoomVal);
    }

    //默认限制地图的显示范围
    //先获取显示范围，在设置限制显示范围
    var isLimit = true;
    function setLimit(){
        var bounds = map.getBounds();
        bounds.northeast.R = 116.567542;
        bounds.northeast.P = 39.997639;
        bounds.southwest.R = 116.22422;
        bounds.southwest.P = 39.813285;
        map.setLimitBounds(bounds); 
        isLimit = false;
    };
    setLimit();

    //点击实现接触限制范围
    btn.onclick = function(){
        if(isLimit == false){
        map.clearLimitBounds(); 
        btn.innerHTML = "已解除限制范围";
        isLimit = true;
        }else{
            setLimit();
            btn.innerHTML = "解除限制范围";
        }    
    }

    //鼠标点击设置地图中心
    map.on('click',function(event){
        map.setCenter([event.lnglat.lng,event.lnglat.lat]);
    });

    //鼠标滑动结束，显示当前省及行政区
    map.on('moveend',function(){
        map.getCity(function(info){
            local.innerHTML = info.province + "," + info.district;
        });
    });
    </script>
</body>

</html>

0 学习 · 6815 问题

查看课程

相似问题

老师检查~

回答 1

请老师检查，谢谢

回答 1

老师，请检查，谢谢。

回答 1

老师检查.

回答 2

请老师检查

回答 1

打开慕课网App查看更多内容