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

本文转载自查看原文 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基本操作（一）天地图专题一：加载天地图