请老师检查
来源：3-12 自由编程
迷失的小麦
2020-02-24 15:00:42
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=1aab89cf5b7b7377fa90355dbc27c093"></script>
<style>
*{margin: 0;padding: 0;}
input{border: none;outline: none;}
.clearfixed {zoom: 1;}
.clearfixed::after {display: block;clear: both;content: "";}
#container{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
.box{width: 350px;height: 350px;box-shadow: 0 0 5px 5px #000;background-color: #fff;position: fixed;left: 20px;top: 20px;z-index: 2;}
.title{font-weight: bold;text-align: center;font-size: 18px;margin-top: 10px;width: 100%;}
.search,.setZoom{font-size: 12px;width: 260px;height: 22px;margin: 20px auto;}
.search-title,.setZoom-title{width: 80px;float: left;line-height: 22px;text-align: right;}
.search-text,.setZoom-text{width: 80px;height: 20px;line-height: 20px;margin-left: 10px;float: left;padding: 0 10px;border: 1px solid #ccc;}
.search-btn,.setZoom-btn{width: 40px;height: 22px;line-height: 20px;text-align: center;margin-left: 10px;background-color: blue;float: left;color: white;}
.clear{display: block;width: 100px;height: 22px;text-align: center;margin: 0 auto;background-color: blue;color: white;}
.city-box{font-size: 12px;position: absolute;right: 20px;bottom: 20px;}
</style>
</head>
<body>
<div id="container">
<div class="box">
<div class="title">工具栏</div>
<div class="search clearfixed">
<div class="search-title">搜索城市</div>
<input type="text" class="search-text">
<input type="button" value="确定" class="search-btn">
</div>
<div class="setZoom clearfixed">
<div class="setZoom-title">设置显示级别</div>
<input type="text" class="setZoom-text">
<input type="button" value="确定" class="setZoom-btn">
</div>
<input type="button" value="解除范围限制" class="clear">
<div class="city-box">当前所在省/直辖市：<span class="city">北京市</span></div>
</div>
</div>
<script>
var map=new AMap.Map('container');
var myBounds = new AMap.Bounds([116.22422,39.813285],[116.567542,39.997639]);
map.setLimitBounds(map.setBounds(myBounds));
//搜索城市
var search=document.querySelector('.search-btn'),
searchText=document.querySelector('.search-text'),
city=document.querySelector('.city');
search.onclick=function(){
map.setCity(searchText.value);
city.innerHTML=searchText.value;
};
//设置级别
var setZoom=document.querySelector('.setZoom-btn'),
setZoomText=document.querySelector('.setZoom-text');
setZoom.onclick=function(){
map.setZoom(Number(setZoomText.value));
};
//为范围限制的按钮绑定点击事件
var clear=document.querySelector('.clear');
clear.onclick=function(){
if(clear.value=='解除范围限制'){
map.clearLimitBounds();
clear.value=='限制显示范围';
}else{
map.setLimitBounds(map.getBounds());
clear.value=='解除范围限制';
}
};
//把当前点击时的经纬度设置成中心点
map.on('click',function(e){
map.setCenter([e.lnglat.lng,e.lnglat.lat]);
});
//工具栏的右下角显示当前省/直辖市
map.on('moveend',function(){
map.getCity(function(info){
city.innerHTML = info.province;
});
});
</script>
</body>
</html>
1回答
-
同学你好， 点击解除限制按钮, 按钮对应的值没有发生改变，建议修改：
修改后，代码效果实现是正确的，继续加油。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题