天地圖專題一：加載天地圖

時間 2019-11-21

標籤地圖專題加載简体版

原文原文鏈接

最近公司的項目到了尾聲。總結一下項目中的一些技術。其中有涉及到天地圖的部分。相似百度地圖，google地圖。咱們要用一些它的公共接口，實現一些咱們的效果。好比在地圖上顯示咱們的設備的位置，範圍，運行軌跡等等。javascript

大多數的功能其實都只是參考天地圖官方api。http://api.tianditu.com/api-new/webIndex.html。css

基本上要實現什麼功能就去看一下api。就能解決多半的問題。可是實際運用中的話可能只看接口還沒法靈活地運用起來。因此這裏寫一個天地圖系列文章，但願給廣大程序員同胞們一點參考。html

加載天地圖首先要引入官方的js:java

[html] view plain copy

<script type="text/javascript" src="http://api.tianditu.com/js/maps.js"></script>

給它一個放地圖的div。設置好樣式，id。git

而後調用給它一個縮放級別，以及一箇中心點，調用TMap();生成地圖放到頁面。縮放級別有18級。代碼:程序員

[html] view plain copy

<!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>