老师检查一下
来源：3-12 自由编程
强强强哥
2019-07-03 22:48:55
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>获取鼠标的经纬度</title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=a3db2663500683aa497929f6719b5ce5"></script>
<style>
*{
margin: 0;
padding: 0;
}
#container {
position: absolute;
left: 0;
top: 0;
width:100%;
height: 100%;
}
#setCenterNode{
width: 400px;
height: 300px;
position: absolute;
left: 0;
top: 20px;
border: 1px solid #eee;
background: #fff;
color: #000;
text-align: center;
line-height: 50px;
position: relative;
}
.nowcity{
position: absolute;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="setCenterNode">
<h1 class="help">工具栏</h1>
<div> 搜索城市:<input type="text" id="cityNode" 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 setCenterNode=document.getElementById('setCenterNode')
var map = new AMap.Map('container',{
zoom:10,//初始的地图级别
center:[116.379391,39.861536]//初始的地图中心点
});
var cityNode=document.getElementById('cityNode');
var citybtn=document.getElementById('citybtn');
var zoomNode=document.getElementById('zoomNode');
var zoombtn=document.getElementById('zoombtn');
var clear=document.getElementById('clear');
var nowCity=document.getElementById('nowCity');
var okNo=false;
// 当前行政中心
map.getCity(function(info){
nowCity.innerHTML=info.province
})
// 随着地图的移动实时更新当前行政区
map.on('moveend',function(){
map.getCity(function(info){
// console.log(info);
nowCity.innerHTML=info.province
})
})
// 搜索城市
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.setLimitBounds(myBounds);
// map.clearLimitBounds(myBounds);
// clear.innerHTML='已解除范围限制';
okNo=false
}else{
map.clearLimitBounds(myBounds);
clear.innerHTML='已解除范围限制';
// clear.innerHTML='解除范围限制';
// map.setLimitBounds(myBounds);
okNo=true
}
}
</script>
</body>
</html>写回答
2回答
-
好帮手慕慕子
2019-07-04
同学你好，代码效果实现的不错， 继续加油哦
欢迎采纳！祝学习愉快~~~
0 -
强强强哥
提问者
2019-07-03
// 通过 地图获取经纬度 并设为当前的中心点 map.on('click',function(e){ map.setCenter([e.lnglat.lng,e.lnglat.lat]); });还有一步 没加上
0
