老师检查.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>自由编程</title>
<link rel="stylesheet" href="./freeCode.css" />
<script src="https://webapi.amap.com/maps?v=1.4.15&key=248ef5458f973ecdf17bf3ccf8993c53"></script>
</head>
<body>
<div id="container"></div>
<div id="toolSide" style="position: absolute; z-index: 99">
<div id="name">工具栏</div>
<div id="currentCity">当前城市:新疆xxxxxxxx</div>
<div id="fcOne">
<div><label for="scText" id="scName">搜索城市</label></div>
<input type="text" name="srCity" id="scText" />
<button id="scBtn">确定</button>
</div>
<div id="fcTwo">
<div><label for="szText" id="szName">设置显示级别</label></div>
<input type="text" name="sZoom" id="szText" />
<button id="szBtn">确定</button>
</div>
<div id="bindORclearLimit">1</div>
</div>
</body>
<script type="text/javascript" src="./freeCode.js"></script>
</html>
CSS
* {
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
#toolSide {
font-size: 24px;
width: 20%;
height: 30.5%;
background-color: #fefefe;
box-shadow: 3px 1px 10px #4e4e4e;
position: absolute;
top: 1%;
left: 2%;
z-index: 99;
}
#toolSide > #name {
text-align: center;
font-weight: bolder;
margin:10px 0;
}
#toolSide > #fcOne,
#toolSide > #fcTwo {
font-size: 16px;
width: 95%;
margin: 0 auto;
margin-bottom: 10px;
}
#toolSide > #fcOne > div:nth-child(1),
#toolSide > #fcTwo > div:nth-child(1) {
width: 35%;
height: 30px;
line-height: 30px;
text-align: right;
box-sizing: border-box;
padding-right: 5px;
display: inline-block;
}
#scText,
#szText {
width: 40%;
height: 30px;
box-shadow: 0 0 1px #e9e9e9;
box-sizing: border-box;
}
#scBtn,#szBtn {
width: 20%;
height: 30px;
box-sizing: border-box;
color: #fff;
background-color: #0040e0;
text-align: center;
line-height: 30px;
}
#bindORclearLimit {
width: 35%;
height: 30px;
line-height: 30px;
font-size: 16px;
background-color: #ababab;
text-align: center;
margin-left: 37%;
box-sizing: border-box;
}
#currentCity {
position: absolute;
right: 2%;
bottom: 2%;
width: auto;
font-size: 14px;
}
JS
// 初始化地图
var map = new AMap.Map("container", {
zoom: 11,
center: [116.379391, 39.861536],
});
//控制地图范围
var flag = true;
var bounds = new AMap.Bounds([116.567542, 39.997639], [116.22422, 39.913285]);
map.setBounds(bounds);
var sBound = map.getBounds();
map.setLimitBounds(sBound)
//加载完成
map.on("complete", function () {
bindORclearLimit.innerHTML = '解除范围限制';
getCity();
});
// 触发搜索城市事件
scBtn.onclick = function () {
map.setCity(scText.value);
}
// 触发设置级别事件
szBtn.onclick = function () {
// 3~18
map.setZoom(szText.value);
}
//触发/解除 地图范围限制
bindORclearLimit.onclick = function () {
if (flag) {
map.clearLimitBounds();
bindORclearLimit.innerHTML = '已解除范围限制';
flag = false;
} else {
map.setBounds(bounds);
sBound = map.getBounds();
map.setLimitBounds(sBound);
bindORclearLimit.innerHTML = '解除范围限制';
flag = true;
}
}
// 触发点击事件，更改center值
map.on("click", function (e) {
map.setCenter([e.lnglat.lng, e.lnglat.lat]);
console.log(map.getCenter());
})
// 触发鼠标事件
map.on("mouseend", function () {
getCity();
});
function getCity() {
map.getCity(function (info) {
currentCity.innerHTML = '当前所在省/直辖市,' + info.province + ": " + info.city;
});
}
正在回答
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星