生活随笔
收集整理的這篇文章主要介紹了
国家地理信息服务平台——天地图使用指南
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
申請成為個人開發者或者企業開發者，獲取調用地圖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>
效果:
?
總結
以上是生活随笔為你收集整理的国家地理信息服务平台——天地图使用指南的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
