天地圖專題一:載入天地圖
最近公司的專案到了尾聲。總結一下專案中的一些技術。其中有涉及到天地圖的部分。 類似百度地圖,google地圖。 我們要用一些它的公共介面,實現一些我們的效果。 比如在地圖上顯示我們的裝置的位置,範圍,執行軌跡等等。
大多數的功能其實都只是參考天地圖官方api。http://api.tianditu.com/api-new/webIndex.html。
基本上要實現什麼功能就去看一下api。就能解決多半的問題。但是實際運用中的話可能只看介面還無法靈活地運用起來。所以這裡寫一個天地圖系列文章,希望給廣大程式設計師同胞們一點參考。
載入天地圖首先要引入官方的js:
<script type="text/javascript" src="http://api.tianditu.com/js/maps.js"></script>
給它一個放地圖的div。設定好樣式,id。
然後呼叫給它一個縮放級別,以及一箇中心點,呼叫TMap();生成地圖放到頁面。縮放級別有18級。程式碼:
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="UTF-8" />
-
<title>載入天地圖</title>
-
<script type="text/javascript" src="http://api.tianditu.com/js/maps.js"></script>
-
</head>
-
<body>
-
<style type="text/css">
-
#mapDiv{
-
height:600px;
-
border: 1px solid #ccc;
-
margin: 10px;
-
}
-
</style>
-
<div id="mapDiv"></div>
-
<script type="text/javascript">
-
function loadMap(){//載入基本地圖和導航
-
try {
-
map = new TMap("mapDiv"); //初始化地圖物件
-
map.centerAndZoom(new TLngLat(103.388611,35.563611), 4);//設定顯示地圖的中心點和級別-中國
-
map.enableHandleMouseScroll(); //允許滑鼠雙擊放大地圖
-
} catch(err) {
-
alert('圖載入不成功,請稍候再試!你可以先使用其他功能!');
-
}
-
}
-
loadMap();
-
</script>
-
</body>
-
</html>
效果圖:
這樣我們就載入了一張基本的地圖了。
更多的內容請關注本系列後續文章。
專案下載地址:https://github.com/liusaint/tiandituMap
演示地址:http://runningls.com/demos/tianditu/index.html?to=loadmap