百度地图API 绘制矩形多边形等覆盖物

 
 DOCTYPE html>
  2 html>
  3 head>
  4     meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5     meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  6     style type="text/css">
  7     body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
  8     #allmap {width: 100%; height:500px; overflow: hidden;}
  9     #result {width:100%;font-size:12px;}
 10     dl,dt,dd,ul,li{
 11         margin:0;
 12         padding:0;
 13         list-style:none;
 14     }
 15     p{font-size:12px;}
 16     dt{
 17         font-size:14px;
 18         font-family:"微软雅黑";
 19         font-weight:bold;
 20         border-bottom:1px dotted #000;
 21         padding:5px 0 5px 5px;
 22         margin:5px 0;
 23     }
 24     dd{
 25         padding:5px 0 0 5px;
 26     }
 27     li{
 28         line-height:28px;
 29     }
 30     style>
 31      script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5E5EE28a7615536d1ffe2ce2a3667859">script>
 32     
 33     script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js">script>
 34     link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
 35     
 36     script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js">script>
 37     link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
 38     title>百度地图API功能演示title>
 39 head>
 40 body>
 41     div id="allmap" style="overflow:hidden;zoom:1;position:relative;"> 
 42         div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;">
 43        div>
 44     div>
 45     div id="result">
 46         input type="button" value="获取绘制的覆盖物个数" onclick="alert(overlays.length)"/>
 47         input type="button" value="清除所有覆盖物" onclick="clearAll()"/>
 48         input type="button"  value="获取多边形的顶点" onclick="getPoint()"/>br/>
 49         input type="button"  value="开启线、面编辑功能" onclick="Editing(‘enable‘)"/>
 50         input type="button"  value="关闭线、面编辑功能" onclick="Editing(‘disable‘)"/>
 51         input type="button"  value="显示原有多边形" onclick="showPolygon(this)" />br/>
 52 
 53         input type="button"  value="画多边形" onclick="draw(BMAP_DRAWING_POLYGON)" />
 54          input type="button"  value="画矩形" onclick="draw(BMAP_DRAWING_RECTANGLE)" />
 55           input type="button"  value="画线" onclick="draw(BMAP_DRAWING_POLYLINE)" /> 
 56           
 57           span>右键获取任意点的经纬度span>
 58     div>
 59     div id="resultShape">div>
 60      div id="shape">坐标为div>
 61 
 62 script type="text/javascript">
 63     function $(id){
 64     return document.getElementById(id);
 65 }
 66 
 67     // 百度地图API功能
 68     var map = new BMap.Map(‘map‘);
 69     var poi = new BMap.Point(113.948913,22.530844);
 70     map.centerAndZoom(poi, 16);
 71     map.enableScrollWheelZoom();  
 72     var overlays = [];
 73     var overlaycomplete = function(e){
 74         overlays.push(e.overlay); 
 75     };
 76     var styleOptions = {
 77         strokeColor:"red",    //边线颜色。
 78         fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
 79         strokeWeight: 3,       //边线的宽度，以像素为单位。
 80         strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。
 81         fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
 82         strokeStyle: ‘solid‘ //边线的样式，solid或dashed。
 83     }
 84 
 85     //实例化鼠标绘制工具
 86     var drawingManager = new BMapLib.DrawingManager(map, {
 87         isOpen: false, //是否开启绘制模式
 88         //enableDrawingTool: true, //是否显示工具栏
 89         drawingToolOptions: {
 90             anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
 91             offset: new BMap.Size(5, 5), //偏离值
 92         },
 93         circleOptions: styleOptions, //圆的样式
 94         polylineOptions: styleOptions, //线的样式
 95         polygonOptions: styleOptions, //多边形的样式
 96         rectangleOptions: styleOptions //矩形的样式
 97     });  
 98 
 99      //添加鼠标绘制工具监听事件，用于获取绘制结果
100     drawingManager.addEventListener(‘overlaycomplete‘, overlaycomplete);
101 
102     map.addEventListener("rightclick",function(e){
103         if(confirm(e.point.lng + "," + e.point.lat)){
104             $("shape").innerHTML=$("shape").innerHTML+" 
("+e.point.lng+","+e.point.lat+")";
105             }
106         });
107     function draw(type){
108         drawingManager.open(); 
109         drawingManager.setDrawingMode(type);
110     }   
111 
112     function clearAll() {
113         for(var i = 0; i  overlays.length; i++){
114             map.removeOverlay(overlays[i]);
115         }
116         overlays.length = 0   
117     }
118     function getPoint(){
119         $("resultShape").innerHTML=‘‘;
120         for(var i = 0; i  overlays.length; i++){
121             var overlay=overlays[i].getPath();
122             $("resultShape").innerHTML=$("resultShape").innerHTML+overlay.length+‘边形:
‘;
123             for(var j = 0; j  overlay.length; j++){
124                 var grid =overlay[j];
125                 $("resultShape").innerHTML=$("resultShape").innerHTML+(j+1)+"个点:("+grid.lng+","+grid.lat+");
";
126             }
127         }
128     }
129     function Editing(state){
130         for(var i = 0; i  overlays.length; i++){
131             state==‘enable‘?overlays[i].enableEditing():overlays[i].disableEditing();
132         }
133     }
134 
135     function  showPolygon(btn){
136       var polygon = new BMap.Polygon([
137           new BMap.Point(113.941853,22.530777),
138           new BMap.Point(113.940487,22.527789),
139           new BMap.Point(113.94788,22.527597),
140           new BMap.Point(113.947925,22.530618)
141       ], styleOptions);  //创建多边形
142       map.addOverlay(polygon);   //增加多边形
143       // overlays.push(polygon); //是否把该图像加入到编辑和删除行列
144        btn.setAttribute(‘disabled‘,‘false‘);
145        showText();
146      }
147 
148      function showText(){
149         var opts = {
150         position : new BMap.Point(113.941853,22.530777),    // 指定文本标注所在的地理位置
151         offset   : new BMap.Size(30, 30)    //设置文本偏移量
152        }
153      var label = new BMap.Label("不可编辑", opts);  // 创建文本标注对象
154         label.setStyle({
155         color : "black",
156          fontSize : "16px",
157         fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
158         });
159       map.addOverlay(label);  
160      }
161 script>
162 body>
163 html>
转载：https://blog.csdn.net/u013239236/article/details/52213977

百度地图API 绘制矩形多边形等覆盖物

标签：height   editing   lse   ali   func   href   button   input   增加   

原文地址：https://www.cnblogs.com/WoAiZmm/p/14544804.html