体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

初始化拖动的时候有个小BUG

来源：3-12 自由编程

qq_慕九州2374973

2020-02-17 19:19:28

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>map1</title>

    <!-- 方式二 异步  -->

<!--    <script type="text/javascript">-->

<!--        window.init = function () {-->

<!--            new AMap.Map("container");-->

<!--        };-->

<!--    </script>-->

<!--    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=005eae90b02a9d31de4ea9e5a123cb62&callback=init"></script>-->


    <!--  方式一  -->

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=005eae90b02a9d31de4ea9e5a123cb62"></script>

    <!--  方式三 动态生成 -->

<!--    <script type="text/javascript">-->

<!--        window.onload = function () {-->

<!--            var map = new AMap.Map("container",{-->

<!--                zoom:10, //初始化地图显示的级别-->

<!--                center:[120,30] //初始化地图的中心点-->

<!--            });-->

<!--            // console.log(map.getZoom());-->

<!--            // console.log(map.getCenter().toString());-->

<!--            //-->

<!--            // map.on("moveend",function () {//自动地图触发-->

<!--            //     console.log(map.getZoom());-->

<!--            //     console.log(map.getCenter().toString());-->

<!--            // }).on("zoomend",function () {//改变级别触发-->

<!--            //     console.log(map.getZoom());-->

<!--            //     console.log(map.getCenter().toString());-->

<!--            // });-->


<!--            //异步设置地图的级别-->

<!--            // setTimeout(function () {-->

<!--            //     map.setZoom(15);-->

<!--            // },5000)-->

<!--        // };-->

<!--        // var jMap = document.createElement("script");-->

<!--        // jMap.src = "https://webapi.amap.com/maps?v=1.4.15&key=005eae90b02a9d31de4ea9e5a123cb62";-->

<!--        // document.head.appendChild(jMap);-->



<!--    // </script>-->

    <style>

        *{margin: 0;padding: 0;}

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

        .toolBar{width: 500px;height: 200px;position: absolute;z-index: 99;right: 20px;top: 20px;

            border: 1px solid black;box-shadow: 0 0 5px black;background: #fff;text-align: center;line-height: 36px;}

        .toolBar-title{font-size: 18px;font-weight: bold;}

        .toolBar-content{height: 36px;}

        .toolBar-text{display:inline-block;width: 100px;text-align: right;margin-right: 8px;}

        .toolBar_input{display: inline-block;margin-right: 8px;height: 24px;}

        .toolBar-btn{display: inline-block;width: 36px;height: 24px;background: #66a8cc;color: #fff;border: none;}

        .toolBar-btn:hover{box-shadow:0 0 5px #66a8cc;}

        .cityLocation{font-size: 14px;display: block;position: absolute;right: 60px;bottom: 2px;}

        .cityLocationText{display: inline-block;margin-left: 8px;}

    </style>

</head>

<body>

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

<div id="toolBar" class="toolBar">

    <span class = "toolBar-title">工具栏</span>

    <p class="toolBar-content"><span class="toolBar-text">搜索城市</span><input type="text" class="toolBar_input" id="searchCityInput"><button class="toolBar-btn" id="citySearchBtn">确定</button></p>

    <p class="toolBar-content"><span class="toolBar-text">设置显示级别</span><input type="text" class="toolBar_input" id="levelSetInput"><button class="toolBar-btn" id="levelSetBtn">确定</button></p>

    <button class="cityLimitBtn" id="cityLimitBtn">未解除范围限制</button>

    <p class="cityLocation">当前所在省/直辖市:<span class="cityLocationText" id="cityLocationText"></span></p>

</div>

<!--方式一-->

<script type="text/javascript">

    var map = new AMap.Map("container",{

        zoom:10

    });


    //限制显示北京

    var bjBounds = new AMap.Bounds([116.567542,39.997639],[116.22422,39.813285]);

    //设置显示范围

    map.setBounds(bjBounds);

    //限制显示范围

    map.setLimitBounds(bjBounds);


    //初始化显示当前城市

    map.getCity(function (e) {

        cityLocationText.innerHTML = e.province;

    });


    //获取元素

    var citySearchBtn = document.querySelector("#citySearchBtn"),

        searchCityInput = document.querySelector("#searchCityInput"),

        cityLocationText = document.querySelector("#cityLocationText");


    var levelSetBtn = document.querySelector("#levelSetBtn"),

        levelSetInput = document.querySelector("#levelSetInput");


    var cityLimitBtn = document.querySelector("#cityLimitBtn"),

        flag = false;

    //为搜索城市按钮绑定事件

    //设置城市

    citySearchBtn.onclick = function () {

        map.clearLimitBounds();

        map.setCity(searchCityInput.value);

        cityLimitBtn.innerHTML = "已解除范围限制";

    };


    //为设置级别按钮绑定事件

    levelSetBtn.onclick = function () {

        map.setZoom(levelSetInput.value);

    };


    //为范围显示按钮绑定事件

    cityLimitBtn.onclick = function () {

        flag = !flag;

        if(flag){

            map.setLimitBounds(map.getBounds());

            cityLimitBtn.innerHTML = "解除范围限制";

        }else{

            map.clearLimitBounds();

            cityLimitBtn.innerHTML = "已解除范围限制";

        }

    };


    //为地图绑定点击事件

    map.onclick = function (e) {

        map.setCenter([e.lnglat.lng,e.lnglat.lat]);

    };


    //右下角显示当前城市

    map.on("moveend",function () {

        map.getCity(function (e) {

            cityLocationText.innerHTML = e.province;

        });

    });

</script>

</body>

</html>


写回答

1回答

好帮手慕糖

2020-02-18

已采纳

同学你好，关于你的问题以及其他可以优化的问题如下：

1、是因为如下，设置的这个范围是有问题的，导致没有对应的内容。将值修改下即可，例：

http://img.mukewang.com/climg/5e4b5379096f634109460082.jpg

2、第一次要点击两下才可以解除。因为最开始是锁定的，flag值为false，但是进入if判断之后，直接将值改为了true，然后再次锁定了。建议：先进行判断，在修改值，例：

http://img.mukewang.com/climg/5e4b54ed09b32a4106410447.jpg

如果我的回答帮助了你，欢迎采纳，祝学习愉快~

0

0 学习 · 6815 问题

查看课程

相似问题

不拖动时地图也随鼠标变化

回答 1

center加坐标和setcenter加坐标有什么区别

回答 1

回答 2

我的地图为啥不能拖拽啊？

回答 2

老师，我有些没有弄懂，设置显示范围和限制范围的的区别

回答 1

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