老师帮忙看下代码，有没有需要优化的地方
来源：3-12 自由编程
weixin_慕数据0318417
2019-12-23 16:58:10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=598752f778bdf24aee04bbf081d10a1d"></script>
<style>
#container {
display: flexbox;
width:80%;
height: 100%;
position: absolute;
right: 0;
top: 0;}
.sideBar {
display: flexbox;
width: 18%;
text-align: center;
}
h3 {
width: 100%;
text-align: center;
}
.content {
text-align: right;
margin-bottom: 5px;
}
input {
width: 30%;
height: 20px;
}
button {
background-color: #6464ff;
color: white;
border: none;
padding: 5px;
font-size: 12px;
margin: 3px;
}
.limitBtn {
background-color: gray;
}
.footertext {
font-size: 12px;
}
</style>
</head>
<body>
<div class="sideBar">
<h3>工具栏</h3>
<div class="content">
<div>
搜索城市：
<input type="text" id="cityVal">
<button id="cityBtn">确定</button>
</div>
<div>
设置显示级别：
<input type="text" id="zoomVal" placeholder="3~18">
<button id="zoomBtn">确定</button>
</div>
</div>
<button class="limitBtn" id="clear" limit="true">
解除限制范围
</button>
<hr>
<div class="footertext">
当前所在省/直辖市：<span id="nowCity"></span>
<br>
当前地图显示级别：<span id="nowZoom"></span>
</div>
</div>
<div id="container"></div>
<script>
window.onload = function(){
clear.limit = true;
}
var map = new AMap.Map("container",{
zoom:10, //初始地图的级别
center: [116.405285,39.904989] //初始地图的中心点
});
map.getCity(function(data){
console.log(data);
nowCity.innerHTML = data.province + data.city + data.district;
nowZoom.innerHTML = map.getZoom();
});
cityBtn.onclick = function(){
if(cityVal.value != ''){
if(clear.limit){
map.clearLimitBounds();
clear.innerHTML = '限制范围显示';
clear.limit = false;
}
map.setCity(cityVal.value);
}
};
zoomBtn.onclick = function(){
map.setZoom(zoomVal.value);
nowZoom.innerHTML = map.getZoom();
}
console.log(map.getBounds());
var myBounds = map.getBounds();
// var myBounds = new AMap.Bounds(map.getBounds().southwest, map.getBounds().northeast);
map.setLimitBounds(myBounds);
clear.onclick = function(){
console.log(clear.limit)
if(clear.limit){
map.clearLimitBounds();
clear.innerHTML = '限制范围显示';
clear.limit = false;
}else{
map.setLimitBounds(map.getBounds());
clear.innerHTML = '解除限制范围';
clear.limit = true;
}
};
map.on('click',function(e){
if(clear.limit){
map.clearLimitBounds();
clear.innerHTML = '限制范围显示';
clear.limit = false;
}
map.setCenter([e.lnglat.lng,e.lnglat.lat])
})
map.on('moveend',function(){
// console.log(map.getZoom());
// console.log(map.getCenter().toString());
map.getCity(function(data){
nowCity.innerHTML = data.province + data.city + data.district;
});
});
map.on('zoomend',function(){
// console.log(map.getZoom());
// console.log(map.getCenter().toString());
nowZoom.innerHTML = map.getZoom();
})
</script>
</body>
</html>
1回答
-
好帮手慕星星
2019-12-23
同学你好，代码实现效果很棒，不需要修改了。继续加油，祝学习愉快~
0
相似问题