老师请检查
来源：3-12 自由编程
慕仙9874720
2020-04-01 20:22:02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的地图</title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=bcbf78eee7dad1b7db001fd80c5dc744"></script>
<style>
#container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.tool {
position: absolute;
top: 0;
left: 0;
width: 350px;
height: 400px;
background-color: #fff;
border: 1px solid #000;
box-shadow: 2px 2px 0 1px rgba(0, 0, 0, .6);
box-sizing: border-box;
padding-top: 20px;
}
.title {
font-size: 22px;
font-weight: bold;
display: flex;
justify-content: center;
}
.zoom,
.search {
padding-top: 10px;
padding-right: 15px;
display: flex;
justify-content: flex-end;
}
input {
width: 150px;
height: 25px;
margin-left: 5px;
}
button {
width: 50px;
background-color: #0099FF;
margin-left: 10px;
cursor: pointer;
}
.limit {
background-color: #999;
width: 120px;
height: 31px;
display: flex;
justify-content: center;
align-items: center;
margin: 10px auto;
font-size: 14px;
cursor: pointer;
}
.currentCity {
position: absolute;
bottom: 0;
right: 0;
padding-bottom: 10px;
padding-right: 10px;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="tool">
<div class="title">工具栏</div>
<div class="search">
<span>搜索城市</span>
<input type="text" class="search-input">
<button class="search-confirm">确定</button>
</div>
<div class="zoom">
<span>设置显示级别</span>
<input type="text" class="zoom-input">
<button class="zoom-confirm">确定</button>
</div>
<div class="limit">解除范围限制</div>
<div class="currentCity">
<span>当前所在省/直辖市：</span>
<span class="city"></span>
</div>
</div>
<script>
const map = new AMap.Map('container');
const myBounds = new AMap.Bounds([116.567542, 39.997639], [116.22422, 39.813285]);
map.setBounds(myBounds);
const bounds = map.getBounds();
map.setLimitBounds(bounds);
let _isLimit = true;
const oriCenter = map.getCenter();
map.getCity(info => {
$('.city').innerText = info.province;
});
function $(query) {
return document.querySelector(query);
}
//搜索城市
$('.search-confirm').onclick = () => {
if (!_isLimit) {
const city = $('.search-input').value;
map.setCity(city);
} else {
alert('请先解除范围限制！');
}
}
//设置级别
$('.zoom-confirm').onclick = () => {
const zoom = $('.zoom-input').value;
map.setZoom(zoom);
}
//设置范围限制
$('.limit').onclick = () => {
if (!_isLimit) {
map.setLimitBounds(bounds);
$('.limit').innerText = '解除范围限制';
_isLimit = true;
map.panTo([oriCenter.R, oriCenter.Q]);
} else {
map.clearLimitBounds();
$('.limit').innerText = '已解除范围限制';
_isLimit = false;
}
}
// 设置中心点
map.on('click', (e) => {
map.setCenter([e.lnglat.R, e.lnglat.Q]);
})
//获取省份或直辖市
map.on('moveend', () => {
map.getCity(info => {
$('.city').innerText = info.province;
});
})
</script>
</body>
</html>
1回答
-
好帮手慕慕子
2020-04-02
同学你好，代码实现是正确的，很棒哦，继续加油，祝学习愉快~
0
相似问题