天地图-第三篇-地图参数设置

时间  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教程