<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>天地圖-覆蓋物</title> <style> /*設置地圖顯示大小*/ #mapDiv{ width: 600px; height: 400px; position: relative; float: left; } span{ padding: 10px; } </style> </head> <body onLoad="onLoad()"> <!--地圖容器--> <div id="mapDiv"></div> <div> <span>顯示</span> <input type="button" onClick="showMarker()" value="顯示標注"/> <input type="button" onClick="showPolyline()" value="顯示線"/> <input type="button" onClick="showPolygon()" value="顯示面"/> <input type="button" onClick="showPolygon1()" value="顯示中空面"/> <input type="button" onClick="showRectangle()" value="顯示矩形"/> <input type="button" onClick="showCircle()" value="顯示圓形"/> <input type="button" onClick="showInfoWindow()" value="顯示信息窗口"/> <input type="button" onClick="showMarkerLabel()" value="顯示標注標簽"/> </div> <div> <span>操作</span> <input type="button" onClick="showInfoWindowMarker()" value="為標注綁定點擊打開信息窗口"/> <input type="button" onClick="getInfoWindowMarker()" value="獲取信息窗口的內容"/> </div> </body> <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的密鑰"></script> <script type="text/javascript"> var map; var zoom = 10; var infoWin; function onLoad() { map = new T.Map("mapDiv"); map.centerAndZoom(new T.LngLat(116.40969, 39.89945), zoom); //使用衛星和路網的混合視圖 （其他視圖都可以) map.addControl(TMAP_HYBRID_MAP); } //顯示標注 function showMarker(){ //清除覆蓋物 map.clearOverLays(); //創建標注對象 var marker = new T.Marker(new T.LngLat(116.411794, 39.9068)); //向地圖上添加標注 map.addOverLay(marker); } //顯示線 function showPolyline(){ //清除覆蓋物 map.clearOverLays(); points = []; points.push(new T.LngLat(116.41136, 39.97569)); points.push(new T.LngLat(116.32969, 39.92940)); points.push(new T.LngLat(116.385438, 39.90610)); var line = new T.Polyline(points); line.setColor("red"); map.addOverLay(line); } //顯示多邊形 function showPolygon(){ //清除覆蓋物 map.clearOverLays(); var points = []; points.push(new T.LngLat(116.41136, 39.97569)); points.push(new T.LngLat(116.411794, 39.9068)); points.push(new T.LngLat(116.32969, 39.92940)); points.push(new T.LngLat(116.385438, 39.90610)); var polygon = new T.Polygon(points,{ color: "blue",weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5}); //向地圖上添加面 map.addOverLay(polygon); } //顯示帶洞多邊形 function showPolygon1(){ //清除覆蓋物 map.clearOverLays(); var points = []; points.push(new T.LngLat(116.315000,39.964750)); points.push(new T.LngLat(116.303330,39.960810)); points.push(new T.LngLat(116.306760,39.866270)); points.push(new T.LngLat(116.328740,39.847560)); points.push(new T.LngLat(116.366500,39.855730)); points.push(new T.LngLat(116.442380,39.856520)); points.push(new T.LngLat(116.455080,39.865480)); points.push(new T.LngLat(116.456110,39.950020)); points.push(new T.LngLat(116.428990,39.967390)); var points1 = []; points1.push(new T.LngLat(116.349330,39.941590)); points1.push(new T.LngLat(116.350620,39.900650)); points1.push(new T.LngLat(116.353110,39.898670)); points1.push(new T.LngLat(116.413880,39.899990)); points1.push(new T.LngLat(116.418340,39.903150)); points1.push(new T.LngLat(116.429330,39.903940)); points1.push(new T.LngLat(116.427270,39.947910)); points1.push(new T.LngLat(116.365810,39.946600)); //創建面對象 var polygon = new T.Polygon([points,points1],{ color: "black", weight: 3, opacity: 0.2, fillColor: "blue", fillOpacity: 0.5 }); //向地圖上添加面 map.addOverLay(polygon); } //顯示矩形 function showRectangle(){ //清除覆蓋物 map.clearOverLays(); var bounds = new T.LngLatBounds(new T.LngLat(116.36231, 39.87784),new T.LngLat( 116.43954, 39.92841)); var rect = new T.Rectangle(bounds ); //向地圖上添加矩形 map.addOverLay(rect); } //顯示圓形 function showCircle(){ //清除覆蓋物 map.clearOverLays(); var circle = new T.Circle(new T.LngLat(116.40093, 39.90313), 5000,{color:"blue",weight:5,opacity:0.5,fillColor:"#FFFFFF",fillOpacity:0.5,lineStyle:"solid"}); //向地圖上添加圓 map.addOverLay(circle); } //顯示信息窗口 function showInfoWindow(){ //清除覆蓋物 map.clearOverLays(); var lnglat = new T.LngLat(116.40969, 39.94940); //創建信息窗口對象 infoWin = new T.InfoWindow(); infoWin.setLngLat(lnglat); //設置信息窗口要顯示的內容 infoWin.setContent("添加的信息窗口"); //向地圖上添加信息窗口 map.addOverLay(infoWin); } //顯示標注文字標簽 function showMarkerLabel(){ //清除覆蓋物 map.clearOverLays(); marker = new T.Marker( new T.LngLat(116.40969, 39.94940)); // 創建標注 map.addOverLay(marker); label = new T.Label({ text: "<b>文字標注!!!<b>", position: marker.getLngLat(), offset: new T.Point(3, -30) }); map.addOverLay(label); } //標注上顯示信息窗口 function showInfoWindowMarker(){ map.clearOverLays(); marker = new T.Marker( new T.LngLat(116.40969, 39.94940)); // 創建標注 map.addOverLay(marker); //創建信息窗口對象 infoWin = new T.InfoWindow(); var info = "我要在標注上顯示的內容，可以是html片段，也可以是純文本"; infoWin.setContent(info); //為標注注冊點擊事件 marker.addEventListener("click", function () { marker.openInfoWindow(infoWin); }); } //標注上顯示信息窗口 function getInfoWindowMarker(){ try{ var info = infoWin.getContent(); alert(info); }catch(e){ alert("請先為標注綁定點擊打開信息窗口事件") } } </script> </html>