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

最新推荐文章于 2024-05-15 15:12:41 发布

weixin_30449239

最新推荐文章于 2024-05-15 15:12:41 发布

阅读量1.2k

点赞数

文章标签： javascript ui 后端 ViewUI

原文链接：http://www.cnblogs.com/nuoye/p/10530515.html

版权

第一次写博客！若有错误的地方请指正，谢谢！
主要从事后端开发... .... 【所以请忽略页面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：地图的比例尺级别。

附：

　　下一篇：地图的基本操作

转载于:https://www.cnblogs.com/nuoye/p/10530515.html

weixin_30449239

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
天地图-第一篇-基本地图加载

第一次写博客！若有错误的地方请指正，谢谢！主要从事后端开发... .... 【所以请忽略页面UI】正文：　天地图-基本地图加载直接上代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>天地图</tit...
复制链接

扫一扫