天天看点

如何加载使用天地图

使用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文件

2.创建地图容器元素

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

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

3.创建地图实例

4.确定经纬度坐标

5.地图初始化

6.设置地图的类别

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

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