生活随笔
收集整理的這篇文章主要介紹了
国家地理信息服务平台——天地图使用指南
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
申請(qǐng)成為個(gè)人開(kāi)發(fā)者或者企業(yè)開(kāi)發(fā)者，獲取調(diào)用地圖api的key，下圖為調(diào)用限額對(duì)比圖。
<!DOCTYPE html>
<html>
<head><meta http-equiv="content-type" content="text/html; charset=utf-8"/><meta name="keywords" content="天地圖"/><title>天地圖－地圖API－范例－經(jīng)緯度直投地圖</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>本示例演示如何顯示經(jīng)緯度直投地圖。</p>
</body>
</html>
運(yùn)行結(jié)果
<!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() {//初始化地圖對(duì)象map = new T.Map("mapDiv");//設(shè)置顯示地圖的中心點(diǎn)和級(jí)別map.centerAndZoom(new T.LngLat(116.40969, 39.89945), zoom);//創(chuàng)建縮放平移控件對(duì)象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－范例－自定義標(biāo)注圖片</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() {//初始化地圖對(duì)象map = new T.Map("mapDiv");//設(shè)置顯示地圖的中心點(diǎn)和級(jí)別map.centerAndZoom(new T.LngLat(116.40969, 39.89945), zoom);//創(chuàng)建縮放平移控件對(duì)象control = new T.Control.Zoom();//添加縮放平移控件map.addControl(control);control.setPosition(T_ANCHOR_TOP_RIGHT);//創(chuàng)建圖片對(duì)象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)});//向地圖上添加自定義標(biāo)注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>本示例演示如何自定義標(biāo)注圖片。</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);//初始化地圖對(duì)象map = new T.Map("mapDiv");//設(shè)置顯示地圖的中心點(diǎn)和級(jí)別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});// 創(chuàng)建標(biāo)注map.addOverLay(marker);var infoWin1 = new T.InfoWindow();var sContent ="<div style='margin:0px;'>" +"<div style='margin:10px 10px; '>" +"<div>電話 : (010)88187700 <br>地址：北京市順義區(qū)機(jī)場(chǎng)東路國(guó)門(mén)商務(wù)區(qū)地理信息產(chǎn)業(yè)園2號(hào)樓天地圖大廈" +"</div>" +"</div>";infoWin1.setContent(sContent);marker.addEventListener("click", function () {marker.openInfoWindow(infoWin1);});// 將標(biāo)注添加到地圖中}function clearAllMarkLayer(){map.clearOverLays();}</script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv" ></div>
<p>本示例演示如何在地圖上顯示一個(gè)信息浮窗。</p>
<div id="resultDiv"></div>
</body>
</html>
效果:
?
總結(jié)
以上是生活随笔為你收集整理的国家地理信息服务平台——天地图使用指南的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
