天地图对接说明文档 - Powered by MinDoc

2022年7月6日星期三

官网地址：

https://www.tianditu.gov.cn/

开发文档

天地图API：http://lbs.tianditu.gov.cn/api/js4.0/guide.html

网页API - JavaScript4.0：http://lbs.tianditu.gov.cn/api/js4.0/guide.html

配置步骤

1 引入天地图js文件

通过<script>标签将API引用到页面中：

<script src="http://api.tianditu.gov.cn/api?v=4.0&tk={KEY密钥}" type="text/javascript"></script>

2 使用天地图API示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>HELLO WORLD</title>
    // 第1步：引入JS
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk={KEY密钥}"></script>
    <script>
        var map;
        var zoom = 12;
        function onLoad() {
            map = new T.Map('mapDiv');//第2步：初始化地图对象
            val lnglat = new T.LngLat(116.40769, 39.89945);//第3步：确定经纬度坐标
            map.centerAndZoom(lnglat, zoom);//第4步，初始化地图
        }
    </script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv" style="position:absolute;width:500px; height:400px"></div>
</body>
</html>

3 步骤说明

准备页面
根据HTML 标准，每一份HTML 文档都应该声明正确的文档类型，我们建议您使用最新的符合HTML5 规范的文档声明：
<!DOCTYPE html>

引入天地图JavaScript API文件

<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥" type="text/javascript"></script>

创建地图容器元素
地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。将div元素的宽和高分别设置为100%，使其充满整个屏幕，或者您也可以计算浏览器窗口的大小并进行设置。

创建地图实例

var map=new T.Map('mapDiv');//初始化地图对象

确定经纬度坐标
```
var lnglat = new T.LngLat(116.40969,39.89945)
```
这里我们使用T命名空间下的T.Lnglat类来创建一个坐标点。T.Lnglat类描述了一个地理坐标点，其中116.40969表示经度，39.89945表示纬度。
地图初始化
```
map.centerAndZoom(lnglat,12);
```
在创建地图实例后，我们需要对其进行初始化，
map.centerAndZoom方法要求设置中心点坐标和地图级别。
注意：地图必须经过初始化才可以执行其他操作。

4 兼容性

浏览器：IE 8.0+、Firefox 3.6+、Opera 9.0+、Safari 3.0+、Chrome
操作系统：Windows、Mac、Linux

作者：李世民创建时间：2022-07-06 15:08
最后编辑：李世民更新时间：2024-01-08 20:53