当前位置： 移动技术网 > IT编程>网页制作>Html5 > 高德地图API 之行政区+范围+平移+经纬度+鼠标样式

高德地图API 之行政区+范围+平移+经纬度+鼠标样式

2020年03月09日  | 移动技术网IT编程  | 我要评论

获取当前地图的行政区 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>

 

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网