天地图-第五篇-覆盖物

最新推荐文章于 2024-05-20 10:12:33 发布
cherry_vincent
最新推荐文章于 2024-05-20 10:12:33 发布
阅读量2.4k
点赞数 2
分类专栏： Web前端文章标签：天地图 javascript 前端
原文链接：https://www.cnblogs.com/nuoye/p/10553837.html
版权
Web前端专栏收录该内容
41 篇文章 13 订阅
订阅专栏
<!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>