请老师检查，优化一下
来源：3-12 自由编程
浅浅199
2020-02-11 11:04:26
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3-12编程</title>
<style>
*{ margin: 0; padding: 0; }
#container{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
#toolBar{width: 300px; height: 250px; position: absolute; z-index: 99;left: 20px; top: 20px;border: 1px solid black; box-shadow: 0 0 5px black; background: white;}
#toolBar-item{text-align: center; font-weight: bold;padding: 10px 0 5px 0;}
.txt1{float: left;margin: 0 3px 10px 13px;font-size: 15px;position: absolute;top: 49px;left: 21px;}
.txt2{float: left;margin: 0 3px 10px 5px;font-size: 15px;position: absolute;top: 94px;left: 0px;}
.selectCity,.showLevel{width: 140px;height: 25px;margin: 0px 3px 10px 5px;}
.selectBtn,.levelBtn{background-color: #1c77f3; width: 50px;height: 35px;color: #fff;position: absolute;right: 0px;top: 45px;margin-right: 5px;}
.levelBtn{top: 90px;}
.clearLimit{width: 100px;height: 35px;background: #a5a7aa;position: absolute;left: 50%;top: 50%;margin-left: -50px;margin-top: 17.5px;}
.txt3,.provinceNode{font-size: 13px;position: absolute;right: 10px;bottom: 6px;}
.txt3{width: 210px;}
.provinceNode{bottom: 0px;}
</style>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=7675d4a47dfe34999663f05c6ebeefec"></script>
</head>
<body>
<div id="container"></div>
<div id="toolBar">
<div id="toolBar-item">工具栏</div>
<div class="txt1">搜索城市<input type="text" class="selectCity"></div>
<button class="selectBtn">确定</button>
<div class="txt2">设置显示级别<input type="text" class="showLevel"></div>
<button class="levelBtn">确定</button>
<button class="clearLimit">解除绘图限制</button>
<div class="txt3">当前所在省/直辖市:<span class="provinceNode"></span></div>
</div>
<script type="text/javascript">
var map = new AMap.Map('container',{
zoom:10,
center:[116.405285,39.904989]
});
// 获取元素
var selectCity = document.querySelector('.selectCity'),
selectBtn = document.querySelector('.selectBtn'),
showLevel = document.querySelector('.showLevel'),
levelBtn = document.querySelector('.levelBtn'),
clearLimit = document.querySelector('.clearLimit'),
provinceNode = document.querySelector('.provinceNode'),
isLimit = true;
// 设置地图的显示范围
var myBounds = map.getBounds();
// 限制地图
map.setLimitBounds(myBounds);
// 解除限制
clearLimit.onclick = function(){
if(isLimit){
map.clearLimitBounds();
clearLimit.innerHTML = '已解除范围限制';
isLimit = false;
}else{
map.setLimitBounds(myBounds);
clearLimit.innerHTML = '解除绘图限制';
isLimit = true;
}
};
// 设置城市
selectBtn.onclick = function(){
map.setCity(selectCity.value);
};
//设置显示等级
levelBtn.onclick = function(){
map.setZoom(showLevel.value);
};
// 获取鼠标经纬度,设置中心点
map.on('click',function(e){
var x = e.lnglat.lng;
var y = e.lnglat.lat;
map.setCenter([x,y]);
});
// 获取当前城市
map.getCity(function(info){
provinceNode.innerHTML = info.province + ',' + info.district;
});
map.on('moveend',function() {
map.getCity(function(info){
provinceNode.innerHTML = info.province + ',' + info.district;
});
});
</script>
</body>
</html>
1回答
-
好帮手慕星星
2020-02-11
同学你好，代码优化如下
1、添加限制需要更新位置，不要用一开始获取默认的
2、设置城市的时候可以接触范围限制，否则设置不了
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题