天地图-第四篇-地图信息获取及地图类型设置

最新推荐文章于 2024-03-26 10:40:34 发布

cherry_vincent

最新推荐文章于 2024-03-26 10:40:34 发布

阅读量1.3k

点赞数

分类专栏： Web前端文章标签：天地图 javascript 前端

原文链接：https://www.cnblogs.com/nuoye/p/10551797.html

版权

Web前端专栏收录该内容

41 篇文章 13 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>天地图</title>
    <style>
        /*设置地图显示大小*/
        #mapDiv{
            width: 600px;
            height: 400px;
            position: relative;
            float: left;
        }
        span{
            padding: 10px;
        }
    </style>
    </head>
    <body onLoad="onLoad()"> 
        <!--地图容器-->
        <div id="mapDiv"></div>
        <div class="menu">
            <span>获取地图中心坐标：</span>
            <input type="button" onClick="getMapCenter()" value="获取地图中心点坐标"/>
        </div>
        <div>
            <span>获取地图缩放级别：</span>
            <input type="button" onClick="getMapZoom()" value="获取地图缩放级别"/>
        </div>
        <div>
            <span>获取地图可视范围：</span>
            <input type="button" onClick="getMapBounds()" value="获取地图可视范围"/>
        </div>
        <div>
            <span>获取地图投影类型：</span>
            <input type="button" onClick="getMapCode()" value="获取地图投影类型"/>
        </div>
        
        <div>
            <span>设置地图投影类型：</span>
            <input type="button" onClick="setMapType(TMAP_NORMAL_MAP)" value="普通街道视图"/>
            <input type="button" onClick="setMapType(TMAP_SATELLITE_MAP)" value="卫星视图"/>
            <input type="button" onClick="setMapType(TMAP_HYBRID_MAP)" value="卫星和路网的混合视图"/>
            <input type="button" onClick="setMapType(TMAP_TERRAIN_MAP)" value="地形视图"/>
            <input type="button" onClick="setMapType(TMAP_TERRAIN_HYBRID_MAP)" value="地形和路网的混合视图。"/>
        </div>
    </body>
    <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;    
        function onLoad() {
            map = new T.Map("mapDiv");
            map.centerAndZoom(new T.LngLat(116.40969, 39.89945), zoom);
        }
         
        //获取地图中心坐标
        function getMapCenter(){
            alert("当前地图中心点：" + map.getCenter().getLng() + "," + map.getCenter().getLat());
        }
        
        //获取地图缩放级别
        function getMapZoom() {
            alert("当前地图缩放级别：" + map.getZoom());
        }
        
        //获取地图可视范围
        function getMapBounds() {
            var bs = map.getBounds();       //获取可视区域
            var bssw = bs.getSouthWest();   //可视区域左下角
            var bsne = bs.getNorthEast();   //可视区域右上角
            alert("当前地图可视范围是：" + bssw.getLng() + "," + bssw.getLat() + "到" + bsne.getLng() + "," + bsne.getLat());
        }
         
        //地图投影类型信息
        function getMapCode(){
            alert("地图投影类型信息是："+map.getCode())
        }
        
        //设置地图投影类型
        function setMapType(e){
            //移动图层
            map.removeControl(e);
            //添加图层
            map.addControl(e);
        }
    </script>
</html>

地图参数有很多，这里就不一一列举了，具体的请参考官方api。