高德地圖API 之行政區+范圍+平移+經緯度+鼠標樣式

本文轉載自查看原文 2020-03-06 23:15 781 html / html5 / h5

獲取當前地圖的行政區 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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 提取行政區邊界經緯度坐標(高德+百度) 高德地圖獲取可視范圍的經緯度用高德地圖API 通過詳細地址獲得經緯度用高德地圖API 通過詳細地址獲得經緯度高德地圖JS API獲取經緯度，根據經緯度獲取城市高德地圖JS API獲取經緯度，根據經緯度獲取城市高德地圖繪制多邊形圈范圍的例子+獲取圈的范圍經緯度利用高德api判斷經緯度點是否在某個區域范圍內調用高德地圖--鼠標點擊獲取經緯度高德地圖JS API ，利用經緯度坐標獲取詳細地址信息