请老师检查帮忙查看那里需要优化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>高德地图demo3-12作业</title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=9821b934088c7281c72cb9ee57666267"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
#container {width:100%; height: 100%; position: absolute; left: 0; top: 0;}
.actionBox{width: 380px; height: 300px; z-index: 99; position: absolute; left:10px; top: 10px; border: 1px solid #000; background: #fff; box-shadow: 0 0 5px #000; padding: 20px;}
.title,div{text-align: center;margin-bottom: 10px;}
input{height: 20px;}
input[type='button']{
background: #0057ff;width: 40px;height: 25px;color: #fff;cursor: pointer;
}
.limitBtn{width: 100px; height: 30px; cursor: pointer;}
.infoDiv{
position: absolute;right: 10px;bottom: 10px;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="actionBox">
<h1 class="title">工具栏</h1>
<div>
搜索城市<input type="text" name="city" id="cityName">
<input type="button" name="" value="确定" id="cityBtn">
</div>
<div>
设置显示级别<input type="text" name="zoom" id="zoomVal">
<input type="button" name="" value="确定" id="zoomBtn">
</div>
<button class="limitBtn" id="limitBtn">解除范围限制</button>
<div class="infoDiv">当前所在的省/直辖市：<span id="infoCity"></span></div>
</div>
<script type="text/javascript">
//1.使用new AMap.Map()方法创建一个地图。
var myMap = new AMap.Map('container');
//2.通过setBounds()方法设置地图显示范围为北京
var myBounds = new AMap.Bounds([116.22422,39.813285],[116.567542,39.997639]);
myMap.setBounds(myBounds);
//使用setLimitBounds()方法限制地图显示在北京
myMap.setLimitBounds(myMap.getBounds());
//为搜索城市输入框后面的按钮绑定点击事件 ,点击时获取输入的城市
cityBtn.onclick = function () {
myMap.setCity(cityName.value);
}
//为设置级别输入框后面的按钮绑定点击事件 ,点击时获取输入的级别
zoomBtn.onclick = function () {
myMap.setZoom(zoomVal.value);
}
//设置范围限制的按钮 ,并为其绑定点击事件。当点击时 , 解除范围限制 .再次点击时 , 限制范围显示
limitBtn.addEventListener('click',function () {
if (limitBtn.innerHTML == '解除范围限制') {
limitBtn.innerHTML = '已解除范围限制';
myMap.clearLimitBounds();
}else if (limitBtn.innerHTML == '已解除范围限制') {
limitBtn.innerHTML = '解除范围限制';
myMap.setLimitBounds(myMap.getBounds());
}
})
//为地图绑定点击事件 , 在事件中获取到鼠标点击时的经纬度 ,并把当前获取的经纬度设置为当前的中心点
myMap.on('click',function (e) {
console.log(e.lnglat.lng);
console.log(e.lnglat.lat);
myMap.setCenter([e.lnglat.lng,e.lnglat.lat])
})
//为鼠标绑定moveend事件 ，当鼠标在地图上移动时 ，让工具栏的右下角显示当前省/直辖市
myMap.on('moveend',function () {
myMap.getCity(function (info) {
//console.log(info);
infoCity.innerHTML = info.province + info.district;
});
})
</script>
</body>
</html>
正在回答
同学你好，非常抱歉，之前老师测试的效果有点问题，用setBounds方法设置没有问题。代码中需要优化的是：
1、搜索城市按钮点击的时候需要解除范围限制
2、一开始就添加上当前所在地
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星