天地图-第五篇-覆盖物
<!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>