百度地图画出区域并获取区域坐标范围

Posted 攻城狮的世界我不懂——lmky

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了百度地图画出区域并获取区域坐标范围相关的知识，希望对你有一定的参考价值。

转载自：http://blog.csdn.net/zzq900503/article/details/21714491

 

API原型 http://developer.baidu.com/map/jsdemo.htm#f0_7

效果如图:

技术分享

 

源代码，新建为html可用：（注意  百度地图密钥需要自己的百度帐号开通申请一下）

[java] view plain copy 技术分享技术分享
  1. <!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%;overflow: hidden;margin:0;}  
  8. #allmap {margin-right: 300px;height: 100%;overflow: hidden;}  
  9. #result {border-left:1px dotted #999;height:100%;width:295px;position:absolute;top:0px;right:0px;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=百度地图密钥"></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.   
  39. <title>鼠标绘制工具</title>  
  40. </head>  
  41. <body>  
  42. <div id="allmap" style="overflow:hidden;zoom:1;position:relative;">     
  43.     <div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>  
  44.     <div id="showPanelBtn" style="position:absolute;font-size:14px;top:50%;margin-top:-95px;right:0px;width:20px;padding:10px 10px;color:#999;cursor:pointer;text-align:center;height:170px;background:rgba(255,255,255,0.9);-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;font-family:‘微软雅黑‘;font-weight:bold;">显示检索结果面板<br/><</div>  
  45.     <div id="panelWrap" style="width:0px;position:absolute;top:0px;right:0px;height:100%;overflow:auto;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;">  
  46.         <div style="width:20px;height:200px;margin:-100px 0 0 -10px;color:#999;position:absolute;opacity:0.5;top:50%;left:50%;" id="showOverlayInfo">此处用于展示覆盖物信息</div>  
  47.         <div id="panel" style="position:absolute;"></div>  
  48.     </div>  
  49. </div>  
  50.   
  51. <div id="result">  
  52.     <dl>  
  53.         <dt>绘制工具功能</dt>  
  54.             <ul>  
  55.                 <li><label><input type="radio" name="openClose1" onclick="drawingManager.open()"/>打开</label>  <label><input type="radio" name="openClose1" onclick="drawingManager.close()" checked="checked"/>关闭</label></li>  
  56.             </ul>  
  57.         </dd>  
  58.         <dt>是否进行线或面积的计算(单位米)</dt>  
  59.             <ul>  
  60.                 <li><label><input type="radio" name="openClose" onclick="drawingManager.enableCalculate()"/>打开</label>  <label><input type="radio" name="openClose" onclick="drawingManager.disableCalculate()"  checked="checked"/>关闭</label></li>  
  61.             </ul>  
  62.         </dd>  
  63.         <dt>绘制功能</dt>  
  64.         <dd>  
  65.             <ul>  
  66.                 <li>  
  67.                     <label><input type="radio" name="drawmode" onclick="drawingManager.setDrawingMode(BMAP_DRAWING_MARKER)" checked="checked"/>画点</label>  
  68.                     <input type="checkbox" id="isInfowindow"/> 是否带信息窗口  
  69.                 </li>  
  70.                 <li>  
  71.                     <label><input type="radio" name="drawmode" onclick="drawingManager.setDrawingMode(BMAP_DRAWING_CIRCLE)"/>画圆</label>  
  72.                 </li>  
  73.                 <li>  
  74.                     <label><input type="radio" name="drawmode" onclick="drawingManager.setDrawingMode(BMAP_DRAWING_POLYLINE)"/>画线</label>  
  75.                 </li>  
  76.                 <li>  
  77.                     <label><input type="radio" name="drawmode" onclick="drawingManager.setDrawingMode(BMAP_DRAWING_POLYGON)"/>画多边形</label>  
  78.                 </li>  
  79.                 <li>  
  80.                     <label><input type="radio" name="drawmode" onclick="drawingManager.setDrawingMode(BMAP_DRAWING_RECTANGLE)"/>画矩形</label>  
  81.                 </li>  
  82.             </ul>  
  83.         </dd>  
  84.         <dt>覆盖物操作</dt>  
  85.         <dd>  
  86.             <ul>  
  87.                 <li>  
  88.                     <input type="button" value="获取绘制的覆盖物个数" onclick="alert(overlays.length)"/>  
  89.                     <input type="button" value="清除所有覆盖物" onclick="clearAll()"/>  
  90.                     <input type="button" value="获取最后一个覆盖物信息" id="getLastOverLay"/>  
  91.                 </li>  
  92.             </ul>  
  93.         </dd>  
  94.     </dl>  
  95.   
  96. </div>  
  97.   
  98. <script type="text/javascript">  
  99.   
  100. // 百度地图API功能  
  101.     var map = new BMap.Map(‘map‘);  
  102.     var poi = new BMap.Point(116.307852,40.057031);  
  103.     map.centerAndZoom(poi, 16);  
  104.     map.enableScrollWheelZoom();  
  105.   
  106.     $("getLastOverLay").onclick = function(){  
  107.         if(overlays.length){  
  108.             alert(overlays[overlays.length - 1]);  
  109.         }else{  
  110.             alert("没有覆盖物");  
  111.         }  
  112.     }  
  113.   
  114.     //信息窗口的内容定义  
  115.     var content = ‘<div style="margin:0;line-height:20px;padding:2px;">‘ +  
  116.                     ‘地址：北京市海淀区上地十街10号<br/>电话：(010)59928888<br/>简介：百度大厦位于北京市海淀区西二旗地铁站附近，为百度公司综合研发及办公总部。‘ +  
  117.                   ‘</div>‘;  
  118.       
  119.     //创建带信息窗口的poi点  
  120.     var searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {  
  121.         title  : "百度大厦",      //标题  
  122.         width  : 290,             //宽度  
  123.         height : 105,              //高度  
  124.         panel  : "panel",         //检索结果面板  
  125.         enableAutoPan : true,     //自动平移  
  126.         searchTypes   :[  
  127.             BMAPLIB_TAB_SEARCH,   //周边检索  
  128.             BMAPLIB_TAB_TO_HERE,  //到这里去  
  129.             BMAPLIB_TAB_FROM_HERE //从这里出发  
  130.         ]  
  131.     });      
  132.       
  133.     var overlays = [];  
  134.     //回调获得覆盖物信息  
  135.     var overlaycomplete = function(e){  
  136.         overlays.push(e.overlay);  
  137.         var result = "";  
  138.         result = "<p>";  
  139.         result += e.drawingMode + ":";  
  140.         if (e.drawingMode == BMAP_DRAWING_MARKER) {  
  141.             result += ‘ 坐标：‘ + e.overlay.getPosition().lng + ‘,‘ + e.overlay.getPosition().lat;  
  142.             if ($(‘isInfowindow‘).checked) {  
  143.                 searchInfoWindow.open(e.overlay);  
  144.             }  
  145.         }  
  146.         if (e.drawingMode == BMAP_DRAWING_CIRCLE) {  
  147.             result += ‘ 半径：‘ + e.overlay.getRadius();  
  148.             result += ‘ 中心点：‘ + e.overlay.getCenter().lng + "," + e.overlay.getCenter().lat;  
  149.         }  
  150.         if (e.drawingMode == BMAP_DRAWING_POLYLINE || e.drawingMode == BMAP_DRAWING_POLYGON || e.drawingMode == BMAP_DRAWING_RECTANGLE) {  
  151.             result += ‘ 所画的点个数：‘ + e.overlay.getPath().length;  
  152.         }  
  153.         result += "</p>";  
  154.         $("showOverlayInfo").style.display = "none";  
  155.         $("panel").innerHTML += result; //将绘制的覆盖物信息结果输出到结果面板  
  156.     };  
  157.   
  158.     var styleOptions = {  
  159.         strokeColor:"red",    //边线颜色。  
  160.         fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。  
  161.         strokeWeight: 3,       //边线的宽度，以像素为单位。  
  162.         strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。  
  163.         fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。  
  164.         strokeStyle: ‘solid‘ //边线的样式，solid或dashed。  
  165.     }  
  166.     //实例化鼠标绘制工具  
  167.     var drawingManager = new BMapLib.DrawingManager(map, {  
  168.         isOpen: false, //是否开启绘制模式  
  169.         enableDrawingTool: true, //是否显示工具栏  
  170.         drawingToolOptions: {  
  171.             anchor: BMAP_ANCHOR_TOP_RIGHT, //位置  
  172.             offset: new BMap.Size(5, 5), //偏离值  
  173.             scale: 0.8 //工具栏缩放比例  
  174.         },  
  175.         circleOptions: styleOptions, //圆的样式  
  176.         polylineOptions: styleOptions, //线的样式  
  177.         polygonOptions: styleOptions, //多边形的样式  
  178.         rectangleOptions: styleOptions //矩形的样式  
  179.     });  
  180.    
  181.     //添加鼠标绘制工具监听事件，用于获取绘制结果  
  182.     drawingManager.addEventListener(‘overlaycomplete‘, overlaycomplete);  
  183.     
  184.     function $(id){  
  185.         return document.getElementById(id);  
  186.     }  
  187.   
  188.     function clearAll() {  
  189.         for(var i = 0; i < overlays.length; i++){  
  190.             map.removeOverlay(overlays[i]);  
  191.         }  
  192.         overlays.length = 0  
  193.     }  
  194.   
  195.     var isPanelShow = false;  
  196.     //显示结果面板动作  
  197.     $("showPanelBtn").onclick = showPanel;  
  198.     function showPanel(){  
  199.         if (isPanelShow == false) {  
  200.             isPanelShow = true;  
  201.             $("showPanelBtn").style.right = "230px";  
  202.             $("panelWrap").style.width = "230px";  
  203.             $("map").style.marginRight = "230px";  
  204.             $("showPanelBtn").innerHTML = "隐藏绘制结果信息<br/>>";  
  205.         } else {  
  206.             isPanelShow = false;  
  207.             $("showPanelBtn").style.right = "0px";  
  208.             $("panelWrap").style.width = "0px";  
  209.             $("map").style.marginRight = "0px";  
  210.             $("showPanelBtn").innerHTML = "显示绘制结果信息<br/><";  
  211.         }  
  212.     }  
  213.   
  214. </script>  
  215. </body>  
  216. </html>  
  217. </script>  

线、矩形等多边形的 坐标获取 需要根据 e.overlay.getPath().length，通过for循环获取

 e.overlay.getPath()[0].lng    e.overlay.getPath()[0].lat

示例：

　　for(var i = 0; i < overlays_lines.length; i++){//循环连线个数
           for(var j = 0; j < overlays_lines[i].getPath().length; j++){//循环每一个连线上的点个数
                var object = new Object();
                object.lnglatX = overlays_lines[i].getPath()[j].lng;
                object.lnglatY = overlays_lines[i].getPath()[j].lat;
                linelnglatArr.push(object);
            }  
      }










以上是关于百度地图画出区域并获取区域坐标范围的主要内容，如果未能解决你的问题，请参考以下文章

怎么利用百度地图API获取某个地区区域轮廓矢量图

Java后台如何获取百度地图上标注的区域范围

百度地图多边形画区域获取节点经纬度坐标判断某一点是否在此区域内

百度地图画圈搜索功能探索

百度地图画圈搜索功能探索

百度地图api 如何判断一个座标属于哪一个行政区