为什么会解除不了限制?

来源:3-12 自由编程

soso_crazy

2019-05-08 21:10:30

<!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>3-12编程练习</title>




<style type="text/css">

* {

margin: 0;

padding: 0;

}

#container {

position: relative;

width: 100%;

height: 100%;

position: absolute;

left: 0;

top: 0;

}

.search {

position: absolute;

top: 10px;

left: 10px;

width: 400px;

height: 300px;

background-color: #ffffff;

box-shadow: 0 0 10px #000000;

}

h3 {

text-align: center;

}

span {

display: inline-block;

width: 100px;

padding-left: 30px;

scroll-padding: 10px;

text-align: right;

}

input[type="text"] {

width: 150px;

display: inline-block;

height: 30px;

margin-bottom: 20px;

}

button {

width: 40px;

height: 30px;

background-color: lightblue;

color: #ffffff;

border: none;

}

button[id="clear"] {

background-color: lightgray;

color: #000000;

display: block;

width: 100px;

height: 50px;

margin: 10px auto;

}

.current {

position: absolute;

bottom: 10px;

right: 20px;

}

span#currentCity {

width: 50px;

}

</style>

</head>


<body>

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

<div class="search">

<h3>工具栏</h3>

<span>搜索城市</span>

<input type="text" id="setCity">

<button id="city">确定</button>

<br>

<span id="zoom">设置显示级别</span>

<input type="text" id="setZoom">

<button id="cityZoom">确定</button>

<br>

<button id="clear">解除范围限制</button>

<br>

<div class="current">当前所在省/直辖市:<span id="currentCity"></span></div>

</div>


<script type="text/javascript">

window.init = function() {

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

zoom: 11

});

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

map.setBounds(myBounds);


var bounds = map.getBounds();

bounds.northeast.R = 116.22422;

bounds.northeast.P = 39.813285;

bounds.southwest.R = 116.567542;

bounds.southwest.P = 39.997639;

map.setLimitBounds(bounds);


clear.onclick = function() {

if (clear.innerHTML === '解除限制范围') {

map.clearLimitBounds(bounds);

clear.innerHTML = '已解除限制范围';

} else if (clear.innerHTML === '已解除限制范围') {

map.setLimitBounds(bounds);

clear.innerHTML = '解除限制范围';

}

};


cityZoom.onclick = function() {

zoom.innerHTML = map.getZoom();

map.setZoom(setZoom.value);

};


city.onclick = function() {

map.setCity(setCity.value);

};


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

currentCity.innerHTML = map.getCity();

});


map.on('click', function(e) {

this.setCenter(e.lnglat.lng, e.lnglat.lat);

})


};

</script>



<script src="https://webapi.amap.com/maps?v=1.4.14&key=5f5261cc796b35dacb5aa695bc465e35&callback=init"></script>

</body>


</html>


写回答

1回答

悄然于心

2019-05-08

同学你好

clear标签里的内容是“解除范围限制”,if判断条件是“解除限制范围”,因为不匹配所以不会进行后续操作

改成一样就好啦,望采纳

0

0 学习 · 6815 问题

查看课程