天地圖專題一：載入天地圖
最近公司的專案到了尾聲。總結一下專案中的一些技術。其中有涉及到天地圖的部分。 類似百度地圖，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