老师该怎么改呀。。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>自由编程3-12</title>
<style>
*{
padding: 0;
margin: 0;
}
#container{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#setCenterNode{
position: absolute;
top: 20px;
left:10px;
width: 400px;
height: 300px;
background: white;
border: 1px solid #eee;
color: #000000;
text-align: center;
line-height: 50px;
}
.nowCity{
position: absolute;
right: 10px;
bottom: 0;
}
</style>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=9de88a718781910c9a1c81230827d1ce"></script>
</head>
<body>
<div id="container"></div>
<div id="setCenterNode">
<h2 class="help">工具栏</h2>
<div>搜索城市<input type="text" id="cityCode" placeholder="输入城市"/><button id="cityBtn">确定</button></div>
<div>设置显示级别<input type="text" id="zoomNode" placeholder="输入级别"/><button id="zoomBtn">确定</button></div>
<button id="clear">解除限制</button>
<div class="nowCity">您当前所在/直辖市：<span id="nowCity"></span></div>
</div>
<script>
var map = new AMap.Map('container',{
zoom:10, //初始的地图级别
center:[116.379391,39.861536] //初始化地图的中心点
});
var cityNode = document.getElementById('cityNode'),
cityBtn = document.getElementById('cityBtn'),
zoomNode = document.getElementById('zoomNode'),
zoomBtn = document.getElementById('zoomBtn'),
clear = document.getElementById('clear'),
nowCity = document.getElementById('nowCity'),
okNo = false;
//当前行政中心
map.getCity(function(info){
nowCity.innerHTML = info.province;
})
//随着地图的移动实时更新当前行政区
map.on('moveend',function(info){
map.getCity(function(info){
//console.log(info);
nowCity.innerHTML = info.city;
});
})
//搜索城市
cityBtn.onclick = function(){
map.setCity(cityNode.value);
};
//显示级别
zoomBtn.onclick = function(){
map.setZoom(zoomNode.value);
}
//设置地图的显示范围
var myBounds = map.getBounds();
map.setBounds(myBounds);
//设置显示 范围限制
map.setLimitBounds(myBounds);
//单击清除按钮，通过okNo的状态来判断是否已经清除限制
clear.onclick = function(){
if(okNo == false){
clear.innerHTML = '已解除范围限制';
map.clearLimitBounds(myBounds);
okNo = true;
}else{
map.setLimitBounds(myBounds);
clear.innerHTML = '解除范围限制';
okNo = false;
}
};
</script>
</body>
</html>
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星