如何加载使用天地图

最新推荐文章于 2025-03-31 15:10:06 发布

xl132598798

最新推荐文章于 2025-03-31 15:10:06 发布

阅读量3.7k

点赞数 4

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/xl132598798/article/details/109500272

版权

前端专栏收录该内容

4 篇文章

订阅专栏

使用API之前，先申请应用key

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>HELLO WORLD</title>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥"></script>
    <script>
        var map;
        var zoom = 12;
        function onLoad() {
            map = new T.Map('mapDiv');
            map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom);
            map.setMapType(TMAP_HYBRID_MAP);
        }
    </script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv" style="position:absolute;width:500px; height:400px"></div>
</body>
</html>

1.在想要显示地图的html文件中引入天地图JavaScript API文件

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

2.创建地图容器元素

地图需要一个HTML元素作为容器，展现在页面上。

<!--创建一个id为mapDiv的div元素-->
<div id="mapDiv" style="position:absolute;width:100%; height:98%"></div>

3.创建地图实例

var map = new T.Map('mapDiv');

4.确定经纬度坐标

var lnglat = new T.LngLat(lng,lat);

5.地图初始化

map.centerAndZoom(中心点坐标,地图级别);

6.设置地图的类别

//卫星和路网的混合视图
map.setMapType(TMAP_HYBRID_MAP);

这需要这样几个步骤，一个卫星和路网混合的地图就出现在您的页面上了！！