请老师检查，谢谢

来源：3-12 自由编程

慕丝1342

2020-04-01 23:04:01

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3-12自由编程</title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=dcee67f573cdde2da470cffd5a66b429"></script> 

<style>
*{margin: 0;padding: 0;}
#container{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}

.toolbar{
width: 300px;
height: 300px;
position: absolute;
top: 5px;
left: 5px;
background-color: #fff;
}

.toolbar h3{
text-align: center;
padding-top: 15px;
padding-bottom: 5px;
}
.toolbar p{
text-align: right;
}

input{
display: inline-block;
width: 130px;
height: 25px;
margin: 5px;
}
button{
background-color: #08d;
color: #fff;
/* outline: none; */
border: none;
height: 29px;
padding-left: 10px;
padding-right: 10px;
margin-right: 10px;
}
.toolbar #remove{
margin-left: 35%;
background-color: #bbb;
color: #000;
}

.toolbar div{
text-align: right;
position: absolute;
right: 5px;
bottom: 10px;
}
</style>
</head>
<body>

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

<!-- 工具栏 -->
<div class="toolbar">
<h3>工具栏</h3>
<p>搜索城市<input type="text" id="search"><button id="searchBtn">确定</button></p>
<p>设置显示级别<input type="text" id="level"><button id="levelBtn">确定</button></p>
<button id="remove">解除范围限制</button>

<div>当前所在省/直辖市：<span id="city">北京市</span></div>
</div>

<script>
//创建地图
var map=new AMap.Map('container');

//设置地图的范围
var myBounds=new AMap.Bounds([116.567542,39.997639],[116.22422,39.813285]);
map.setBounds(myBounds);

//限制地图显示范围
var bounds=map.getBounds();
map.setLimitBounds(bounds);


//解除范围限制 按钮
remove.onclick=function(){
if(this.innerHTML=="解除范围限制"){
this.innerHTML="已解除范围限制";
map.clearLimitBounds();
}else{
this.innerHTML="解除范围限制";
map.setLimitBounds(bounds);
}
}

//点击 搜索城市的确定按钮 时触发
searchBtn.onclick=function(){
map.clearLimitBounds();
remove.innerHTML="已解除范围限制";
map.setCity(search.value); //把input输入的值设置为当前城市
}

//移动结束后获取当前行政区
map.on('moveend',function(){
map.getCity(function(info){
city.innerHTML=info.city||info.province;
});
})

//设置显示级别
levelBtn.onclick=function(){
map.setZoom(Number(level.value));
}

//把当前经纬度设置为当前的中心点
map.on('click',function(e){
map.setCenter([e.lnglat.lng,e.lnglat.lat])
})

</script>
</body>
</html>

写回答

1回答