碼上歡樂
相關內容    簡體    繁體

百度地圖畫出區域並獲取區域坐標范圍

本文轉載自   查看原文   2017-02-04 09:29   25854    JavaScript

轉載自：http://blog.csdn.net/zzq900503/article/details/21714491

 

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

效果如圖:

 

源代碼，新建為html可用：（注意  百度地圖密鑰需要自己的百度帳號開通申請一下）

[java] view plain copy 在CODE上查看代碼片派生到我的代碼片
  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);
            }  
      }


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 百度地圖 根據坐標，獲取省份，城市，區域 百度地圖API 地圖圈區域並計算坐標點是否在區域內 百度地圖獲取區域邊界 並填充顏色 基於百度地圖的區域重疊判斷 Vue利用百度地圖畫圓並且獲取圓心坐標和半徑 百度地圖畫圈，拖拽后獲取點的坐標 利用百度地圖 在地圖上針對某個區域生成隨機點坐標 百度地圖多邊形畫區域、獲取節點經緯度坐標、判斷某一點是否在此區域內 【百度地圖API】自行獲取區域經緯度的工具 百度,谷歌地圖顯示區域輪廓示例
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM