老师请检查一下

来源：3-12 自由编程

海绵弟弟

2019-11-01 14:42:46

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=73a3a21c59eb0b5f20429fffacbf42b7"></script> 
<style>
*{margin:0;border:0;}
#container {width:100%; height: 100%;position: absolute;top:0;left: 0;} 
.control{width: 300px;height: 300px;box-shadow: 0 0 5px black;position: absolute;left: 3px;top: 3px;z-index: 1;background: white;}
.control h1{text-align: center;}
.control div input{border:1px solid black;width: 130px;}
.control span{display: inline-block;width: 100px;text-align: right;}
.control button{background: yellow;border:none;cursor:pointer;}
.limite{position: absolute;width: 100px;height: 50px;background: yellow;left: 100px;top: 100px;cursor:pointer;line-height: 50px;}
.local{
position: absolute;right: 2px;bottom:2px;
}
</style>
</head>
<body>
<div id="container">
<div class="control">
<h1>工具栏</h1>
<div>
<span>搜索城市</span>
<input type="text" class="city">
<button class="search-city">确定</button>
</div>
<div>
<span>设置显示级别</span>
<input type="text" class="level">
<button class="show-level">确定</button>
</div>
<div class="limite">解除地区限制</div>
<div class="local">当前的省市区为：北京市朝阳区</div>
</div>
</div> 
<script>
var map = new AMap.Map('container',{
zoom:10,
});
var bounds = new AMap.Bounds([116.22422,39.813285],[116.567542,39.997639]);
map.setBounds(bounds);

var searchcity = document.getElementsByClassName('search-city')[0];
var showlevel = document.getElementsByClassName('show-level')[0];
var city = document.getElementsByClassName('city')[0];
var level = document.getElementsByClassName('level')[0];
var limite = document.getElementsByClassName('limite')[0];
var local = document.getElementsByClassName('local')[0];

searchcity.onclick = function(){
if (city.value) {
map.setCity(city.value);
}else{
return false;
}
};

showlevel.onclick = function(){
if (level.value) {
map.setZoom(level.value);
}else{
return;
}
}

limite.onclick = function(){
if (limite.innerHTML === "解除地区限制") {

this.innerHTML = "地区限制";
map.setLimitBounds(bounds);
}else{
this.innerHTML = "解除地区限制";
map.clearLimitBounds();
}
}

map.on('click',function(e){
map.setCenter([e.lnglat.lng,e.lnglat.lat]);
});

map.on('moveend',function(){
map.getCity(function(e){
local.innerHTML = '当前的省市区为：' + e.province+e.city+e.district;
})
})
</script>
</body>
</html>

写回答

1回答