为什么会解除不了限制?
来源: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判断条件是“解除限制范围”,因为不匹配所以不会进行后续操作
改成一样就好啦,望采纳
相似问题