老师请检查
来源：3-12 自由编程
慕虎1106190
2020-08-07 12:09:23
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
font-size: 8px;
}
input { width: 50px;height: 20px; }
#container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 500px;
}
#container #box {
position: absolute;
top: 5px;
left: 5px;
z-index: 10;
width: 200px;
height: 200px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 2px 2px 1px rgba(91, 89, 91);
text-align: center;
}
label {display: inline-block; width: 80px; height: 20px; margin-right: 5px; text-align: right;}
#container #box .content {
margin-top: 5px;
width: 100%;
}
#container #box #limit { margin-top: 10px;padding: 5px; }
#container .last {
position: absolute;bottom: 5px;right: 10px;z-index: 20
}
</style>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=c4836ba5a86a4b85cbd159439f193d0a"></script>
</head>
<body>
<div id="container">
<div id="box">
<h2>工具栏</h2>
<div class="content">
<label for="search">搜索城市</label>
<input type="text" id="search1">
<button id="btn1">确定</button>
</div>
<div class="content">
<label for="search">设置显示级别</label>
<input type="text" id="search2">
<button id="btn2">确定</button>
</div>
<button id="limit">解除范围限制</button>
<div class="last">当前所在省/直辖市:<span id="current"></span></div>
</div>
</div>
<script>
var map = new AMap.Map('container', {
zoom: 14,
center: [116.37,39.86]
})
var myBounds = new AMap.Bounds([116.22422,39.813285],[116.567542,39.997639]);
map.setBounds(myBounds);
var bounds = map.getBounds();
map.setLimitBounds(bounds);
btn1.onclick = function() {
map.setCity(search1.value)
}
btn2.onclick = function() {
map.setZoom(search2.value)
}
var flag = true;
limit.onclick = function() {
if(flag) {
map.clearLimitBounds();
limit.innerHTML = '已解除限制范围';
flag = false;
}else {
map.setLimitBounds(bounds);
limit.innerHTML = '解除限制范围';
flag = true
}
}
map.on('click', function(e) {
console.log(e)
map.setCenter([e.lnglat.lng,e.lnglat.lat])
})
map.on('moveend', function() {
map.getCity(function(info) {
current.innerHTML = info.province+ ',' + info.district
})
})
</script>
</body>
</html>
1回答
-
好帮手慕星星
2020-08-07
同学你好，代码实现效果是可以的。
建议：地图显示部分太小了，建议铺满整个视口。参考
祝学习愉快！
1
相似问题