天地图-第一篇-基本地图加载

第一次写博客!若有错误的地方请指正,谢谢!
主要从事后端开发... .... 【所以请忽略页面UI】

正文:
 天地图-基本地图加载

直接上代码:

<!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>
    </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', {
                projection: 'EPSG:4326'
            });
            map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom);
        }
    </script>
</html>

这里使用的是天地图版本是4.0的,自2019年1月1日起天地图API及服务接口调用都需要获得开发授权,授权码登陆官方申请即可
官方链接   http://www.tianditu.gov.cn/ 

介绍一下地图(ps:官方有详细说明)

实例化参数:

属性 类型 默认值 说明
projection String "EPSG:900913" 指定地图的投影方式,目前支持的地图投影方式有:EPSG:900913(墨卡托投影),EPSG:4326(大地平面投影)。
minZoom number null 地图允许展示的最小级别。
maxZoom number null 地图允许展示的最大级别。
maxBounds LngLatBound null 当这个选项被设置后,地图被限制在给定的地理边界内,当用户平移将地图拖动到视图以外的范围时会出现弹回的效果,并且也不允许缩小视图到给定范围以外的区域(这取决于地图的尺寸)。使用setMaxBounds方法可以动态地设置这种约束。
center LngLat null 地图的初始化中心点。
zoom number null 地图的初始化级别。

代码中函数说明:

  Map(container:String|HTMLElement[,opts:MapOptions])

  作用:

    在指定的容器内创建地图实例,之后需要调用Map.centerAndZoom()方法对地图进行初始化。未进行初始化的地图将不能进行任何操作。
  参数说明:
    container:用于显示地图的DIV对象。
    opts:地图属性对象,后面会说到,参考MapOptions。

  centerAndZoom(lnglat:LngLat,zoom:Number)

  作用:  

    初始化定位地图。

  参数说明:
    lnglat:地图的中心点地理坐标。
    zoom:地图的比例尺级别。

  panTo(lnglat:LngLat[,zoom:Number])

  作用:

    将地图的中心点变换到指定的地理坐标,如果同时指定了缩放等级,则同时缩放到指定的等级。

  参数说明:
    lnglat:地图的中心点地理坐标。
    zoom:地图的比例尺级别。

  

 

附:

  下一篇:地图的基本操作

posted @ 2019-03-14 15:35  诺.叶  阅读(1927)  评论(2编辑  收藏  举报