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

Posted 陈莺莺呀

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了高德地图API 之行政区+范围+平移+经纬度+鼠标样式相关的知识，希望对你有一定的参考价值。

获取当前地图的行政区 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;}
    百度地图api 如何判断一个坐标属于哪一个行政区


 百度地图api 如何判断一个坐标属于哪一个行政区


 地域数据标准化


 百度地图api-在中国范围内的多行政区选择与反选（增加屏蔽层）


 利用高德提供的api获取行政区域查询


 哪里可以下载免费行政边界矢量地图