如何載入使用天地圖

xl132598798發表於2020-11-05
地圖

使用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);

這需要這樣幾個步驟，一個衛星和路網混合的地圖就出現在您的頁面上了！！

相關文章