麻烦老师帮忙检查一下代码，谢谢~
来源：3-12 自由编程
慕粉2243585596
2020-10-03 13:00:55
<!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=925780f2c0e51ac1fd598ba3ca423cae"></script>
<style type="text/css">
*{margin:0;padding:0;}
#container{width: 100%;height: 100%;position: absolute;top: 0;left: 0}
.toolbar{width: 300px;height: 300px;z-index: 99;position: absolute;top: 10px;left: 10px;background: #fff;box-shadow: 2px 2px 5px #000}
h3{text-align: center;margin: 15px 0 10px 0;}
p{text-align: right;font-size: 12px;height: 40px;margin-right: 10px;}
.city,.level{width: 150px;height: 25px}
.searchCity,.setLevel{height: 29px;border:none;background: #0053ff;color: #fff;font-size: 12px;
width: 40px;cursor: pointer;}
p:nth-child(4){text-align: center;}
.setBounds{height: 30px; width: 105px;border: none;background: #bcb8b8;cursor: pointer;}
p:last-child{position: absolute;bottom: 5px;height: 20px;right: 0;}
</style>
</head>
<body>
<div id="container"></div>
<div class="toolbar">
<h3>工具栏</h3>
<p>搜索城市
<input type="text" class="city" name="">
<button class="searchCity">确定</button>
</p>
<p>设置显示级别
<input type="text" class="level" name="">
<button class="setLevel">确定</button>
</p>
<p><button class="setBounds">解除范围限制</button></p>
<p class="">当前所在省/直辖市:<span class="provinceVal">北京市</span></p>
</div>
<script type="text/javascript">
var searchCity=document.querySelector(".searchCity"),
cityVal=document.querySelector(".city"),
setLevel=document.querySelector(".setLevel"),
levelVal=document.querySelector(".level"),
setBounds=document.querySelector(".setBounds"),
provinceVal=document.querySelector(".provinceVal"),
setbool=true;//有范围限制
var map = new AMap.Map('container');
//设置地图显示范围为北京
map.setBounds(new AMap.Bounds([116.567542,39.997639],[116.22422,39.813285]));
//限制地图显示在北京
var bounds=map.getBounds();
map.setLimitBounds(bounds);
//设置显示级别
setLevel.onclick=function(){
map.setZoom(levelVal.value);
}
//设置地图显示城市
searchCity.onclick=function(){
map.setCity(cityVal.value);
}
//设置/解除范围限制
setBounds.onclick=function(){
setbool=!setbool;
if(!setbool){
map.clearLimitBounds();
this.innerHTML="已解除范围限制"
}else{
var bounds=map.getBounds();
map.setLimitBounds(bounds);
this.innerHTML="解除范围限制"
}
}
//设置中心点
map.on("click",function(e){
var lng=e.lnglat.lng;//经度
var lat=e.lnglat.lat;//纬度
map.setCenter([lng,lat]);
})
//显示当前省/直辖市
map.on("moveend",function(){
map.getCity(function(info){
provinceVal.innerHTML=info.province;
})
})
</script>
</body>
</html>写回答
1回答
-
好帮手慕星星
2020-10-07
同学你好，代码实现效果很棒。继续加油，祝学习愉快！
0
相似问题