天地图-第五篇-覆盖物

<!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>

天地图-第五篇-覆盖物相关推荐

python实训心得2000_实训总结万能版2000字五篇
实训总结万能版 2000 字五篇通过这次实训,我收获了很多,一方面学习到了许多以前没学过的专业知识与知识的应用,另一方面还提高了自己动手做项目的能力. 本次实训, 是对我能力的进一步锻炼, 也是 ...
Python之路【第五篇】：面向对象及相关
Python之路[第五篇]:面向对象及相关 Python之路[第五篇]:面向对象及相关面向对象基础基础内容介绍详见一下两篇博文: 面向对象初级篇面向对象进阶篇其他相关一.isinstance ...
第五篇：Visual Studio 2008 Web开发使用的新特性
第五篇:Visual Studio 2008 Web开发使用的新特性本篇翻译自MSDN. .NET Framwork 3.5与Visual Studio 2008 包含很多新特性.AJAX的Web开 ...
OpenCV学习系列教程第五篇：测试和提高代码的效率
Opencv-Python学习系列教程第五篇来自opencv-python官方学习文档,本人谨做翻译和注释,以及一些自己的理解本文由作者翻译并进行代码验证,转载请注明出处~ 官方文档请参阅:htt ...
带你少走弯路：五篇文章学完吴恩达机器学习
本文是吴恩达老师的机器学习课程[1]的笔记和代码复现部分,这门课是经典,没有之一.但是有个问题,就是内容较多,有些内容确实有点过时. 如何在最短时间学完这门课程?作为课程的主要翻译者和笔记作者,我推荐 ...
坚持的力量第十五篇
第十五篇漩涡鸣人从他身上,我看到了进步和向上的力量,经别人推荐,我发现我渐渐的喜欢上了<火影忍者>. 首先,<火影>中的歌曲很有震撼力和穿透力,产生心灵的共鸣 ...
【OpenCV入门指南】第五篇轮廓检测下
上一篇<[OpenCV入门指南]第五篇轮廓检测上>介绍了cvFindContours函数和cvDrawContours函数,并作了一个简单的使用示范.本篇将展示一个实例,让大家对轮廓检测有 ...
推荐五篇论文| 轻量级的Transformer; 对比学习；ResNeSt；Shortcut Learning等
本文介绍了最近比较有意思的五篇文章: 轻量级的transformer 监督式的对比学习 shortcur learning ResNeSt Attention模块的分析 Lite Transforme ...
史上最简单的SpringCloud教程 | 第五篇: 路由网关(zuul)
转:https://blog.csdn.net/forezp/article/details/69939114 最新版本: 史上最简单的SpringCloud教程 | 第五篇: 路由网关(zuul)( ...

天地图-第五篇-覆盖物

天地图-第五篇-覆盖物相关推荐

最新文章

热门文章