高德地圖獲取屏幕四角經緯度demo

時間 2019-11-17

標籤地圖獲取屏幕四角經緯度 demo 简体版

原文原文鏈接

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>限制地圖顯示範圍</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script src="http://webapi.amap.com/maps?v=1.4.4&key=您申請的key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<div id="tip">
   <td class="column2">
                當前： <input type="text" readonly="true" id="lnglat">
                左下： <input type="text" readonly="true" id="lnglat2">
                左上： <input type="text" readonly="true" id="lnglat4">
                右上：     <input type="text" readonly="true" id="lnglat3">
                右下：     <input type="text" readonly="true" id="lnglat5">
                
                
            </td>

</div>

<div class="button-group">
    <input type="button" class="button" onclick="setLimitBounds()" value="限定區域到當前視野" />
    <input type="button" class="button" onclick="getLimitBounds()" value="獲取限制的區域"/>
    <input type="button" class="button" onclick="clearLimitBounds()" value="清除區域限制"/>
    
</div>
<script>
    var map = new AMap.Map("container", {
        resizeEnable: true
    });
    map.plugin(["AMap.CitySearch"], function() {
        var citysearch = new AMap.CitySearch();
        citysearch.getLocalCity();
        AMap.event.addListener(citysearch, "complete", function(result) {
            var citybounds;
            if (result && result.city && result.bounds) {
                citybounds = result.bounds;
                map.setBounds(citybounds);
            }
        });
    });  
    function setLimitBounds() {
        map.setLimitBounds(map.getBounds());
    }
    function getLimitBounds() {
        var limitBounds = map.getLimitBounds();
        if (limitBounds) {
            var tip = [];
            tip.push('限制區域：\n西南座標[' + limitBounds.southwest.lng + ',' + limitBounds.southwest.lat + ']\n')
            tip.push('東北座標[' + limitBounds.northeast.lng + ',' + limitBounds.northeast.lat + ']')
            alert(tip.join(''));
        } else {
            alert('未設置限制區域');
        }
    }
    
    
     function getLimitBounds2() {
        var limitBounds = map.getLimitBounds();
        if (limitBounds) {
           
          
                    document.getElementById("lnglat2").value = limitBounds.southwest.lng + ',' + limitBounds.southwest.lat;
 document.getElementById("lnglat4").value = limitBounds.southwest.lng + ',' + limitBounds.northeast.lat;

            
               document.getElementById("lnglat3").value = limitBounds.northeast.lng + ',' + limitBounds.northeast.lat;
                document.getElementById("lnglat5").value = limitBounds.northeast.lng + ',' + limitBounds.southwest.lat;
            
          //  alert(tip.join(''));
        } else {
           // alert('未設置限制區域');
        }
    }  
    
    
    
    function clearLimitBounds() {
        map.clearLimitBounds();
    }

    var map = new AMap.Map("container", {
        resizeEnable: true
    });
    //爲地圖註冊click事件獲取鼠標點擊出的經緯度座標
    var clickEventListener = map.on('click', function(e) {
        document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat();
        setLimitBounds() ;
        getLimitBounds2();
        clearLimitBounds();
    
    });
    var auto = new AMap.Autocomplete({
        input: "tipinput"
    });
    AMap.event.addListener(auto, "select", select);//註冊監聽，當選中某條記錄時會觸發
    function select(e) {
        if (e.poi && e.poi.location) {
            map.setZoom(15);
            map.setCenter(e.poi.location);
        }
    }
</script>

</body>
</html>

該例子是經過高德提供的api簡單的弄出來的，主要經過高德地圖的獲取當前屏幕的限制區域裏的獲取限制區域座標拼湊成的。javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。