老师，请检查

来源：3-12 自由编程
phantom0308
2020-07-24 17:25:51
<!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=38730beb95e8b421dc945b1b02c01ac6"></script> 
<style>
*{
padding:0px;
margin:0px;
}
.center {
    text-align: center;
}

/**地图容器**/
#container{
width:100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}

/*显示框*/
.viewBox{
    width: 600px;
    height: 530px;
    background: #FFF;
    position: absolute;
    top: 10px;
    left: 10px;
    box-shadow: 2px 2px 12px 3px rgba(0,0,0,.8);
    padding: 20px;
}
.viewBox .column{
margin-bottom:15px;
}

.viewBox h2{
margin-bottom: 18px;
}

/*文字*/
.viewBox .font{
line-height: 56px;
font-size: 18px;
width:150px;
display: inline-block;
text-align: right;
margin-right: 10px;
}
/*输入框*/
.viewBox .text{
width: 250px;
height: 54px;
border:1px solid #cfcfcf;
vertical-align: top;
margin-right: 10px;
font-size:18px;
padding-left:10px;
}
/*确定按钮*/
.viewBox .btn{
background: #246cf7;
width: 98px;
height: 56px;
outline: none;
border: 0px none;
color: #fff;
font-size: 18px;
cursor: pointer;
}
/*清除按钮*/
.viewBox .clearBtn{
background: #eee;
outline: none;
border:0 none;
color:#000;
width: 178px;
height: 56px;
margin-left:200px;
font-size:18px;
cursor: pointer;
}
.provinceInfo{
position: absolute;
right:10px;
bottom:10px;
}
</style>
<script>
window.onload=function(){
var map = new AMap.Map("container");
// 设置地图的显示范围
var MyBounds = new AMap.Bounds([116.22422,39.813285],[116.567542,39.997639]);
map.setBounds(MyBounds);
// 限定地图的显示范围
map.setLimitBounds(MyBounds);
var isLimit = true;
// 搜索城市
var  btnCity = document.getElementById("cityBox").getElementsByClassName("btn")[0];
btnCity.onclick = function(){
var cityValue = document.getElementById("cityBox").getElementsByClassName("text")[0].value;
if(cityValue!=""){
if(isLimit){
alert("请先解除范围限制");
}else{
map.setCity(cityValue);
}

}else{
alert("请输入要搜索的城市");
}
};

// 设置显示级别
var  btnZoom = document.getElementById("zoomBox").getElementsByClassName("btn")[0];
btnZoom.onclick = function(){
var zoomValue = document.getElementById("zoomBox").getElementsByClassName("text")[0].value;
if(zoomValue!=""){
map.setZoom(zoomValue);
}else{
alert("请输入要设置的级别");
}
};

// 解除限制范围
var btnClearBounds = document.querySelector(".clearBtn");
btnClearBounds.onclick = function(){
if(isLimit){
map.clearLimitBounds();
isLimit = false;
btnClearBounds.setAttribute("value","已解除范围限制");
}else{
// var newBounds = 
map.setLimitBounds(MyBounds);
isLimit = true;
btnClearBounds.setAttribute("value","解除范围限制");
}
}
// 获取所在行政区
var province = document.querySelector(".province");
map.getCity(function(info){
province.innerText = info.province;
});
// 获取所在行政区
map.on("moveend",function(){
map.getCity(function(info){
province.innerText = info.province;
});
});
// console.log(btnCity);
// var city = map.getCity(function(info){
// });
};
</script>
</head>
<body>
<div id="container"></div>
<div class="viewBox">
<h2 class="center">工具栏</h2>
<div id="cityBox" class="column center">
<span class="font">搜索城市：</span><input type="text" class="city text"/><input type="button" value="确定" class="btn" />
</div>
<div id="zoomBox" class="column center">
<span class="font">设置显示级别：</span><input type="text" class="zoom text"/><input type="button" value="确定" class="btn" />
</div>
<div class="clearBoundsBox"><input type="button" value="解除范围限制" class="clearBtn"></div>
<div class="provinceInfo">当前所在省/直辖市：<span class="province"></span></div>
</div>
</body>
</html>
写回答
1回答