天地图-第一篇-基本地图加载
第一次写博客!若有错误的地方请指正,谢谢!
主要从事后端开发... .... 【所以请忽略页面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:地图的比例尺级别。
附:
下一篇:地图的基本操作