天地圖-第二篇-地圖的基本操作

本文轉載自查看原文 2019-03-14 16:15 532 地圖

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>天地圖-基本地圖</title>
    <style>
        /*設置地圖顯示大小*/
        #mapDiv{
            width: 600px;
            height: 400px;
        }
    </style>
    </head>
    <body onLoad="onLoad()"> 
        <!--地圖容器-->
        <div id="mapDiv"></div>
        
        <div>
            <input type="button" id="button1" value="放大地圖"/>
            <input type="button" id="button2" value="縮小地圖"/>
            <input type="button" id="button3" value="向右移動"/>
            <input type="button" id="button4" value="向左移動"/>
            <input type="button" id="button5" value="向上移動"/>
            <input type="button" id="button6" value="向下移動"/>
            <input type="button" id="button7" value="獲取地圖范圍"/>
        </div>
    </body>
    <script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的密鑰></script>
    <script type="text/javascript">
        var map;
        var zoom = 12;
        var lng = 116.40969;
        var lat = 39.89945;
        var i = 1;
        function onLoad() {
            map = new T.Map("mapDiv");
            map.centerAndZoom(new T.LngLat(lng, lat), zoom);
        }
        
        /*放大地圖*/
        $("#button1").click(function(){
            map.zoomIn();
        });
        
        /*縮小地圖*/
        $("#button2").click(function(){
            map.zoomOut();
        });
        
        /*向右移動*/
        $("#button3").click(function(){
            map.panTo(new T.LngLat(lng+i,lat)); 
            i++;
        });
        
        /*向左移動*/
        $("#button4").click(function(){
            map.panTo(new T.LngLat(lng-i,lat)); 
            i++;
        });
        
        /*向上移動*/
        $("#button5").click(function(){
            map.panTo(new T.LngLat(lng,lat+i)); 
            i++;
        });
        
        /*向下移動*/
        $("#button6").click(function(){
            map.panTo(new T.LngLat(lng,lat-i)); 
            i++;
        });
        
        
        /*獲取可視化區域*/
           $("#button7").click(function(){
               //獲取可視區域
            var bs = map.getBounds();
            //可視區域左下角
            var bssw = bs.getSouthWest();
            //可視區域右上角
            var bsne = bs.getNorthEast(); 
            alert("當前地圖可視范圍是：" + bssw.lng + "," + bssw.lat + "到" + bsne.lng + "," + bsne.lat);
        });
    </script>
</html>

對地圖的一些簡單操作，相關的方法具體參數參考官網

下一篇：地圖參數設置

免責聲明！

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

猜您在找 Git 第二篇：基本操作天地圖天地圖：加載天地圖 OpenLayers 3 的地圖基本操作天地圖-第六篇-圖形繪制天地圖-第五篇-覆蓋物天地圖-第三篇-地圖參數設置 IOS百度地圖之--->第二篇《大頭針__簡單使用及自定義》 MongoDB基礎教程系列--第二篇 MongoDB基本操作（一）天地圖專題一：加載天地圖