获取当前地图的行政区 getcity()
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>map</title> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> <style> *{margin:0;padding:0;} #container {width:100%; height: 100%;top:0;left:0;position: absolute; } #setzoomnode{width:300px;height:100px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;} </style> </head> <body> <div id="container"></div> <div id="setzoomnode"> </div> <script> var map=new amap.map("container"); map.on("moveend",function(){ //获取行政区 map.getcity(function(info){ console.log(info); setzoomnode.innerhtml=info.province+","+info.city+","+info.district; }) }) </script> </body> </html>
注意:默认只能获取中国的行政区
设置行政区 setcity()
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>map</title> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> <style> *{margin:0;padding:0;} #container {width:100%; height: 100%;top:0;left:0;position: absolute; } #setzoomnode{width:300px;height:100px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;} </style> </head> <body> <div id="container"></div> <div id="setzoomnode"> <input type="text" id="city"> <button id="btn">设置行政区</button> </div> <script> var map=new amap.map("container"); map.on("moveend",function(){ //获取行政区 map.getcity(function(info){ console.log(info); setzoomnode.innerhtml=info.province+","+info.city+","+info.district; }) }) //设置行政区 map.setcity("宁波"); //通过事件设置行政区 btn.onclick=function(){ map.setcity(city.value); } </script> </body> </html>
获取地图的范围 getbounds()
c对象
northeast 右上
southwest 左下
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>map</title> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> <style> *{margin:0;padding:0;} #container {width:100%; height: 100%;top:0;left:0;position: absolute; } #setzoomnode{width:400px;height:100px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;} </style> </head> <body> <div id="container"></div> <div id="setzoomnode"> <span id="ne"></span><br> <span id="sw"></span><br> </div> <script> var map=new amap.map("container"); map.on("moveend",function(){ //获取范围 console.log(map.getbounds()); ne.innerhtml=map.getbounds().northeast.tostring(); sw.innerhtml=map.getbounds().southwest.tostring(); }) </script> </body> </html>
设置地图的显示范围 setbounds()
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>map</title> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> <style> *{margin:0;padding:0;} #container {width:100%; height: 100%;top:0;left:0;position: absolute; } #setzoomnode{width:400px;height:100px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;} </style> </head> <body> <div id="container"></div> <div id="setzoomnode"> <span id="ne"></span><br> <span id="sw"></span><br> </div> <script> var map=new amap.map("container"); //先左下角,再右上角 var mybounds=new amap.bounds([122.240801,29.401671],[123.539934,30.261788]); map.setbounds(mybounds); //设置的范围并不一定完全贴合获取到的范围,只能是尽可能匹配 console.log(map.getbounds().northeast.tostring()); console.log(map.getbounds().southwest.tostring()); </script> </body> </html>
限制显示范围 setlimitbounds()
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>map</title> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> <style> *{margin:0;padding:0;} #container {width:100%; height: 100%;top:0;left:0;position: absolute; } #setzoomnode{width:400px;height:100px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;} </style> </head> <body> <div id="container"></div> <div id="setzoomnode"> <span id="ne"></span><br> <span id="sw"></span><br> </div> <script> var map=new amap.map("container"); //限制显示范围 var bounds=map.getbounds(); map.setlimitbounds(bounds); </script> </body> </html>
限制在当前范围内不可查看其它范围的
解除范围限制 clearlimitbounds()
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>map</title> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> <style> *{margin:0;padding:0;} #container {width:100%; height: 100%;top:0;left:0;position: absolute; } #setzoomnode{width:400px;height:100px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;} </style> </head> <body> <div id="container"></div> <div id="setzoomnode"> <span id="ne"></span><br> <span id="sw"></span><br> </div> <script> var map=new amap.map("container"); //限制显示范围 var bounds=map.getbounds(); map.setlimitbounds(bounds); //解除范围限制 map.clearlimitbounds(); </script> </body> </html>
控制单个坐标值的限制
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>map</title> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> <style> *{margin:0;padding:0;} #container {width:100%; height: 100%;top:0;left:0;position: absolute; } #setzoomnode{width:400px;height:100px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;} </style> </head> <body> <div id="container"></div> <div id="setzoomnode"> <span id="ne"></span><br> <span id="sw"></span><br> </div> <script> var map=new amap.map("container"); //限制显示范围 var bounds=map.getbounds(); console.log(bounds); //单独限制右上角的水平坐标不能超过123 bounds.northeast.r=123; map.setlimitbounds(bounds); //解除范围限制 map.clearlimitbounds(); </script> </body> </html>
以上实现右上角的水平范围不会超过123
一个关于显示和解除地图范围的demo
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>map</title> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> <style> *{margin:0;padding:0;} #container {width:100%; height: 100%;top:0;left:0;position: absolute; } #setzoomnode{width:400px;height:100px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;} </style> </head> <body> <div id="container"></div> <div id="setzoomnode"> 右边水平限制:<input type="text" id="x2"><br> 左边水平限制<input type="text" id="x1"><br> <button id="btn">确定</button> <button id="clear">解除限制</button> </div> <script> var map=new amap.map("container"); //限制显示范围 btn.onclick=function(){ var bounds=map.getbounds(); //input输入的文本是string,需要转为number bounds.northeast.r=number(x2.value); bounds.southwest.r=number(x1.value); map.setlimitbounds(bounds); } //解除显示范围 clear.onclick=function(){ map.clearlimitbounds(); } map.on("moveend",function(){ console.log(map.getbounds().northeast.r); console.log(map.getbounds().southwest.r); }) </script> </body> </html>
地图的平移,以像素为单位
panby(左右像素,上下像素) 左正右负,上正下负
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>map</title> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> <style> *{margin:0;padding:0;} #container {width:100%; height: 100%;top:0;left:0;position: absolute; } #setzoomnode{width:400px;height:100px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;} </style> </head> <body> <div id="container"></div> <div id="setzoomnode"> 右边水平限制:<input type="text" id="x2"><br> 左边水平限制<input type="text" id="x1"><br> <button id="btn">确定</button> <button id="clear">解除限制</button> </div> <script> var map=new amap.map("container"); settimeout(function(){ //向左平移50像素,向上平移30像素 map.panby(50,30); },2000); </script> </body> </html>
随机移动
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>map</title> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> <style> *{margin:0;padding:0;} #container {width:100%; height: 100%;top:0;left:0;position: absolute; } #setzoomnode{width:400px;height:100px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;} </style> </head> <body> <div id="container"></div> <div id="setzoomnode"> </div> <script> var map=new amap.map("container"); //每3秒随机移动 setinterval(function(){ //向左上方向随机移动 //map.panby(30*math.random(),30*math.random()); //不确定方向的随机移动 map.panby(30*math.random()-15,30*math.random()-15); },3000); </script> </body> </html>
panto() 移动到指定位置
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>map</title> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> <style> *{margin:0;padding:0;} #container {width:100%; height: 100%;top:0;left:0;position: absolute; } #setzoomnode{width:400px;height:100px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;} </style> </head> <body> <div id="container"></div> <div id="setzoomnode"> </div> <script> var map=new amap.map("container"); console.log(map.getcenter().tostring()); settimeout(function(){ // 宁波移动到了绍兴 map.panto([120.549792,29.868388]); },3000); </script> </body> </html>
通过事件设置平移
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>map</title> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> <style> *{margin:0;padding:0;} #container {width:100%; height: 100%;top:0;left:0;position: absolute; } #setzoomnode{width:400px;height:100px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;} </style> </head> <body> <div id="container"></div> <div id="setzoomnode"> <input type="text" id="x"> <input type="text" id="y"> <button id="btn">移动</button> </div> <script> var map=new amap.map("container"); console.log(map.getcenter().tostring()); //通过事件设置 btn.onclick=function(){ map.panto([x.value,y.value]); } </script> </body> </html>
longitude 经度
latitude 纬度
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>map</title> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> <style> *{margin:0;padding:0;} #container {width:100%; height: 100%;top:0;left:0;position: absolute; } #setzoomnode{width:400px;height:100px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;} </style> </head> <body> <div id="container"></div> <div id="setzoomnode"> 鼠标点击的经纬度:<span id="xy"></span> </div> <script> var map=new amap.map("container"); //通过事件设置 map.on("click",function(e){ console.log(e.lnglat); xy.innerhtml=e.lnglat.lng+","+e.lnglat.lat; //同时将鼠标点击位置设置为中心点 map.setcenter([e.lnglat.lng,e.lnglat.lat]); }) </script> </body> </html>
以上代码实现鼠标点击的位置作为地图的中心点
设置鼠标样式 setdefaultcursor()
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>map</title> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> <style> *{margin:0;padding:0;} #container {width:100%; height: 100%;top:0;left:0;position: absolute; } #setzoomnode{width:400px;height:100px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;} </style> </head> <body> <div id="container"></div> <div id="setzoomnode"> </div> <script> var map=new amap.map("container"); //只要是css的cursor中能设置的属性值,都可以 map.setdefaultcursor("pointer"); </script> </body> </html>