麻烦老师检查~~
来源：3-12 自由编程
七十七个七
2019-05-15 13:08:13
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>高德地图</title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=1606b1fa190a3e6b09557a5d90e11dea"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#container{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#toolbar,
#setZoom{
width: 300px;
height: 250px;
background: #fff;
position: absolute;
top: 20px;
left: 20px;
z-index: 2;
box-shadow: 2px 2px 3px 1px rgba(0,0,0,0.5);
}
#toolbar h1{
font-size: 18px;
text-align: center;
margin-top: 20px;
}
.citybox{
width: 100%;
margin-top: 10px;
}
.citybox label{
display: inline-block;
font-size: 14px;
width: 100px;
text-align: right;
margin-right: 5px;
}
#citybtn,
#zoombtn{
width: 40px;
height: 27px;
background: #216df6;
border: none;
color: #fff;
font-size: 12px;
}
#zoomval,
#cityVal{
width: 120px;
height: 24px;
}
#clearbtn{
background: #d3d2d3;
width: 100px;
height: 32px;
border: none;
}
#getCenter{
position: absolute;
right: 8px;
bottom: 10px;
font-size: 12px;
}
</style>
</head>
<body>
<div id="container">
<div id="toolbar">
<h1>工具栏</h1>
<div class="citybox">
<label>搜索城市 </label><input type="text" id="cityVal" />
<button id="citybtn">确定</button>
</div>
<div class="citybox">
<label>设置显示级别 </label><input type="text" id="zoomval" />
<button id="zoombtn">确定</button>
</div>
<div class="citybox">
<label></label><button id="clearbtn">解除范围限制</button>
</div>
<span id="getCenter"></span>
</div>
</div>
<script type="text/javascript">
var map=new AMap.Map('container',{
zoom:12,
center:[116.567542,39.997639]
});
var bounds=map.getBounds();
map.setLimitBounds(bounds);
citybtn.onclick=function(){
map.setCity(cityVal.value);
}
zoombtn.onclick=function(){
map.setZoom(zoomval.value);
}
clearbtn.onclick=function(){
if(clearbtn.innerHTML==='解除范围限制'){
map.clearLimitBounds(bounds);
clearbtn.innerHTML='已解除范围限制';
}else if(clearbtn.innerHTML='已解除范围限制'){
clearbtn.innerHTML='解除范围限制';
map.setLimitBounds(bounds);
}
}
map.getCity(function(info){
getCenter.innerHTML='当前所在省/直辖市：'+info.province;
});
map.on('moveend',function(){
map.getCity(function(info){
getCenter.innerHTML='当前所在省/直辖市：'+info.province;
});
});
map.on('click',function(e){
map.setCenter([e.lnglat.lng,e.lnglat.lat]);
});
</script>
</body>
</html>
1回答
-
同学你好，代码实现效果没有问题，很棒哦！
祝学习愉快！
0
相似问题