天地圖-第三篇-地圖參數設置

本文轉載自查看原文 2019-03-14 17:06 1008 地圖

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>天地圖-地圖參數設置</title>
    <style>
        /*設置地圖顯示大小*/
        #mapDiv{
            width: 600px;
            height: 400px;
        }
        span{
            padding: 10px;
        }
    </style>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的密鑰"></script>
    </head>
    <body onLoad="onLoad()"> 
        <!--地圖容器-->
        <div id="mapDiv"></div>
        <div>
            <span>設置經緯度及縮放級別：</span>
            <span>經度</span><input id="lng" type="text" value="116.64899">
            <span>緯度</span><input id="lat" type="text" value="40.12948">
            <span>縮放級別</span><input id="zoom" type="text" value="12">
            <input type="button" value="設置" onClick="setCenterAndZoom()"/>
        </div>
        <hr />
        <div>
            <span>是否允許鼠標雙擊放大：</span>
            <input type="button" onClick="map.enableDoubleClickZoom()" value="允許雙擊地圖放大"/>
            <input type="button" onClick="map.disableDoubleClickZoom()" value="禁止雙擊地圖放大"/>
        </div>
        <hr />
        <div >
            <p>是否允許滾動鼠標滑輪縮放：</p>
            <input type="button" onClick="map.enableScrollWheelZoom()" value="允許鼠標滾輪縮放地圖"/>
            <input type="button" onClick="map.disableScrollWheelZoom()" value="禁止鼠標滾輪縮放地圖"/>
        </div>
        <hr />
        <div>
            <p>是否允許滾動鼠標慣性滑動：</p>
            <input type="button" onClick="map.enableInertia()" value="允許鼠標地圖慣性拖拽"/>
            <input type="button" onClick="map.disableInertia()" value="禁止鼠標地圖慣性拖拽"/>
        </div>
        <hr />
        <div>
            <p>是否允許鍵盤操作地圖:(小鍵盤上的四個方向鍵，地圖將向相應的方向移動一段距離；敲擊大小鍵盤上的+、-兩個鍵，地圖將放大或縮小)</p>
            <input type="button" id="button1" onClick="map.enableKeyboard()" value="允許鍵盤操作地圖"/>
            <input type="button" id="button2" onClick="map.disableKeyboard()" value="禁止鍵盤操作地圖"/>
        </div>
        <hr />
        <div>
            <span>地圖樣式：</span>
            <input type="button" onClick="map.setStyle('black')" value="block"/>
            <input type="button" onClick="map.setStyle('indigo')" value="indigo"/>
            <input type="button" onClick="map.removeStyle()" value="恢復默認"/>
        </div>
        
    </body>
    <script type="text/javascript">
        var map;
        var zoom = 12;    
        function onLoad() {
             //初始化地圖對象
            map = new T.Map("mapDiv");
            //設置顯示地圖的中心點和級別
            map.centerAndZoom(new T.LngLat(116.40969, 39.89945), zoom);
        }
        function setCenterAndZoom() {
            var lng = document.getElementById("lng").value;
            var lat = document.getElementById("lat").value;
            var zoom = document.getElementById("zoom").value;
            map.centerAndZoom(new T.LngLat(lng, lat), zoom);
        }
    </script>
</html>

直接上代碼，不多嗶嗶

免責聲明！

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

猜您在找 天地圖天地圖：加載天地圖天地圖-第六篇-圖形繪制天地圖-第五篇-覆蓋物天地圖常用WMTS配置參數天地圖-第二篇-地圖的基本操作天地圖專題一：加載天地圖基礎地圖-在線地圖-天地圖（標注） ArcMap加載天地圖 vue 加載天地圖