老师 您好 麻烦帮我看看效果吧
来源：3-12 自由编程
小虾虾小
2019-10-30 10:29:35
<!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=cae1f6c32cb63e91eaf620502db545a4"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#container{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.box{
width: 380px;
height: 300px;
border: 1px solid #000;
background: #fff;
box-shadow: 0 0 5px #000;
z-index: 9;
position: absolute;
top: 10px;
left: 10px;
}
.box table{
margin: 20px 0 0 15px;
text-align: right;
}
.box table caption{
font-weight: bold;
font-size: 1.5em;
}
.box table tr{
height: 40px;
}
.box table .left{
text-align: left;
}
.box #cityBtn,
.box #levelBtn{
width: 50px;
height: 30px;
line-height: 30px;
color: #fff;
text-align: center;
margin-left: 10px;
background: #007effeb;
border: none;
}
.box input{
height: 26px;
line-height: 26px;
text-indent: 5px;
margin-left: 5px;
}
.box #limitBtn{
width: 120px;
height: 30px;
line-height: 30px;
text-align: center;
background: #ccc;
border: none;
}
.box .position{
position: absolute;
right: 5px;
bottom: 5px;
font-size: 12px;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="box">
<table>
<caption>工具栏</caption>
<tr>
<td>搜索城市</td>
<td><input id="cityNode" type="text"></input></td>
<td><button id="cityBtn">确定</button></td>
</tr>
<tr>
<td>设置显示级别</td>
<td><input id="levelNode" type="text"></input></td>
<td><button id="levelBtn">确定</button></td>
</tr>
<tr>
<td></td>
<td class="left"><input type="button" id="limitBtn" value="解除范围限制"></td>
<td></td>
</tr>
</table>
<span class="position">当前所在省/直辖市：<sapn id="position">北京市</sapn></span>
</div>
<script type="text/javascript">
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);
// 搜索城市输入框后面的按钮绑定点击事件
cityBtn.onclick = function(){
if (cityNode.value != "") {
map.setCity(cityNode.value);
}else{
return false;
}
};
// 设置级别输入框后面的按钮绑定点击事件
levelBtn.onclick = function(){
if (levelNode.value != "") {
map.setZoom(levelNode.value);
}else{
return false;
}
};
// 限制的按钮绑定点击事件
limitBtn.onclick = function(){
// debugger;
if (this.value == '解除范围限制') {
map.clearLimitBounds();
this.value = '已解除范围限制';
}else {
map.setLimitBounds(myBounds);
this.value = '解除范围限制';
}
};
// 地图绑定点击事件
map.on('click',function(e){
map.setCenter([e.lnglat.lng,e.lnglat.lat]);
});
// 鼠标绑定moveend事件
map.on('moveend',function(){
map.getCity(function(info){
position.innerHTML = info.province;
});
});
</script>
</body>
</html>
1回答
-
同学你好，效果实现的不错，棒棒哒，继续加油哦，祝学习愉快~
0
相似问题