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

時間  2020-07-11
標籤 地圖 第三 參數 設置 简体版
原文   原文鏈接 
<!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>

直接上代碼，很少嗶嗶javascript

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程