-
使用準備
申請成爲個人開發者或者企業開發者，獲取調用地圖api的key，下圖爲調用限額對比圖。
-
開始繪製第一個地圖
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="keywords" content="天地圖"/>
<title>天地圖－地圖API－範例－經緯度直投地圖</title>
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密鑰"></script>
<style type="text/css">body,html{width:100%;height:100%;margin:0;font-family:"Microsoft YaHei"}#mapDiv{width:100%;height:400px}input,b,p{margin-left:5px;font-size:14px}</style>
<script>
var map;
var zoom = 12;
function onLoad() {
map = new T.Map('mapDiv', {
projection: 'EPSG:4326'
});
map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom);
}
</script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv"></div>
<p>本示例演示如何顯示經緯度直投地圖。</p>
</body>
</html>
運行結果
-
加上縮放放大組件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="keywords" content="天地圖"/>
<title>天地圖－地圖API－範例－添加縮放平移控件</title>
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密鑰"></script>
<style type="text/css">body,html{width:100%;height:100%;margin:0;font-family:"Microsoft YaHei"}#mapDiv{width:100%;height:400px}input,b,p{margin-left:5px;font-size:14px}</style>
<script>
var map, control;
var zoom = 12;
function onLoad() {
//初始化地圖對象
map = new T.Map("mapDiv");
//設置顯示地圖的中心點和級別
map.centerAndZoom(new T.LngLat(116.40969, 39.89945), zoom);
//創建縮放平移控件對象
control = new T.Control.Zoom();
//添加縮放平移控件
map.addControl(control);
control.setPosition(T_ANCHOR_TOP_RIGHT);
}
</script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv"></div>
</body>
</html>
效果:
-
添加自定義圖片標註
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="keywords" content="天地圖"/>
<title>天地圖－地圖API－範例－自定義標註圖片</title>
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密鑰"></script>
<style type="text/css">body,html{width:100%;height:100%;margin:0;font-family:"Microsoft YaHei"}#mapDiv{width:100%;height:400px}input,b,p{margin-left:5px;font-size:14px}</style>
<script>
var map;
var zoom = 12;
function onLoad() {
//初始化地圖對象
map = new T.Map("mapDiv");
//設置顯示地圖的中心點和級別
map.centerAndZoom(new T.LngLat(116.40969, 39.89945), zoom);
//創建縮放平移控件對象
control = new T.Control.Zoom();
//添加縮放平移控件
map.addControl(control);
control.setPosition(T_ANCHOR_TOP_RIGHT);
//創建圖片對象
var icon = new T.Icon({
iconUrl: "http://api.tianditu.gov.cn/img/map/markerA.png",
iconSize: new T.Point(19, 27),
iconAnchor: new T.Point(10, 25)
});
//向地圖上添加自定義標註
var marker = new T.Marker(new T.LngLat(116.411794, 39.9068), {icon: icon});
map.addOverLay(marker);
}
</script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv" ></div>
<p>本示例演示如何自定義標註圖片。</p>
</body>
</html>
- 運行結果
:
-
添加事件
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta name="keywords" content="天地圖"/> <title>天地圖－地圖API－範例－信息窗口</title> <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密鑰"></script> <style type="text/css">body,html{width:100%;height:100%;margin:0;font-family:"Microsoft YaHei"}#mapDiv{width:100%;height:400px}input,b,p{margin-left:5px;font-size:14px}</style> <script> var map; var zoom = 12; var center; var localsearch; var radius = 5000; var infoWin; function onLoad() { center = new T.LngLat(116.63072 ,40.054952); //初始化地圖對象 map = new T.Map("mapDiv"); //設置顯示地圖的中心點和級別 map.centerAndZoom(center, zoom); createMaker(); } function createMaker(){ var icon = new T.Icon({ iconUrl: "http://api.tianditu.gov.cn/img/map/markerA.png", iconSize: new T.Point(19, 27), iconAnchor: new T.Point(10, 25) }); var marker = new T.Marker(center, {icon: icon});// 創建標註 map.addOverLay(marker); var infoWin1 = new T.InfoWindow(); var sContent = "<div style='margin:0px;'>" + "<div style='margin:10px 10px; '>" + "<div>電話 : (010)88187700 <br>地址：北京市順義區機場東路國門商務區地理信息產業園2號樓天地圖大廈" + "</div>" + "</div>"; infoWin1.setContent(sContent); marker.addEventListener("click", function () { marker.openInfoWindow(infoWin1); });// 將標註添加到地圖中 } function clearAllMarkLayer(){ map.clearOverLays(); } </script> </head> <body onLoad="onLoad()"> <div id="mapDiv" ></div> <p>本示例演示如何在地圖上顯示一個信息浮窗。</p> <div id="resultDiv"></div> </body> </html>效果:
