百度地圖繪製多邊形獲取座標，並可對多邊形二次修改
阿新 • • 發佈：2019-02-03
先看下效果圖
程式碼如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html{width: 100%;height: 100%;overflow: hidden;margin:0;} #allmap {margin-right: 200px;height: 100%;overflow: hidden;} #result {border-left:1px dotted #999;height:100%;width:200px;position:absolute;top:0px;right:0px;font-size:12px;} dl,dt,dd,ul,li{ margin:0; padding:0; list-style:none; } p{font-size:12px;} dt{ font-size:14px; font-family:"微軟雅黑"; font-weight:bold; border-bottom:1px dotted #000; padding:5px 0 5px 5px; margin:5px 0; } dd{ padding:5px 0 0 5px; } li{ line-height:28px; } </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=地圖祕鑰"></script> <!--載入滑鼠繪製工具--> <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script> <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" /> <title>滑鼠繪製工具</title> </head> <body> <div id="allmap" style="overflow:hidden;zoom:1;position:relative;"> <div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div> </div> <div id="result"> <dl> <dt>區域</dt> <dd> <ul> <li> <label>城市</label> <select class="width-18" id="csdict" onchange="getcs(this.value)"> <option value="">-請選擇-</option> <option value="北京市">北京市</option> <option value="上海市">上海市</option> <option value="合肥市">合肥市</option> </select> </li> </dd> <dt>操作操作</dt> <dd> <ul> <li> <input type="button" value="獲取繪製的覆蓋物個數" onclick="alert(overlays.length)"/> <input type="button" value="清除所有覆蓋物" onclick="clearAll()"/> <input type="button" value="儲存" onclick="save()"/> <input type="button" value="載入" onclick="loadMyOverlay()"/> </li> </ul> </dd> </dl> </div> <script type="text/javascript"> // 百度地圖API功能 var map = new BMap.Map('map'); var poi = new BMap.Point(116.307852,40.057031); map.centerAndZoom(poi, 16); map.enableScrollWheelZoom(); var overlays = []; //回撥獲得覆蓋物資訊 var overlaycomplete = function(e){ //將多邊形儲存到陣列 overlays.push(e.overlay); //開啟編輯模式 e.overlay.enableEditing(); //新增事件監聽函式 //e.overlay.addEventListener("lineupdate",function(e){ //}); //建立右鍵選單 var markerMenu=new BMap.ContextMenu(); markerMenu.addItem(new BMap.MenuItem('刪除',removeMarker.bind(e.overlay))); e.overlay.addContextMenu(markerMenu); }; //儲存地圖 function save(){ var map = this.map; var overlays = this.overlays;//獲取存放的多邊形陣列 var path = overlays[0].getPath();//獲取第一個多邊形 for(var i=0;i<path.length;i++){ alert("座標為：lng:"+path[i].lng+" lat:"+path[i].lat); } } //設定多邊形樣式物件 var styleOptions = { strokeColor:"#2E8B57", //邊線顏色。 fillColor:"#388E8E", //填充顏色。當引數為空時，圓形將沒有填充效果。 strokeWeight: 2, //邊線的寬度，以畫素為單位。 strokeOpacity: 0.8, //邊線透明度，取值範圍0 - 1。 fillOpacity: 0.3, //填充的透明度，取值範圍0 - 1。 strokeStyle: 'solid' //邊線的樣式，solid或dashed。 } //例項化滑鼠繪製工具 var drawingManager = new BMapLib.DrawingManager(map, { isOpen: false, //是否開啟繪製模式 enableDrawingTool: true, //是否顯示工具欄 drawingMode:BMAP_DRAWING_POLYGON,//繪製模式 多邊形 drawingToolOptions: { anchor: BMAP_ANCHOR_TOP_RIGHT, //位置 offset: new BMap.Size(5, 5), //偏離值 drawingModes:[ BMAP_DRAWING_POLYGON//僅支援多邊形 ] }, polygonOptions: styleOptions //設定多邊形的樣式 }); //新增滑鼠繪製工具監聽事件，用於獲取繪製結果 drawingManager.addEventListener('overlaycomplete', overlaycomplete); function $(id){ return document.getElementById(id); } //清除所有覆蓋物 function clearAll() { for(var i = 0; i < overlays.length; i++){ map.removeOverlay(overlays[i]); } overlays.length = 0 ; map.removeOverlay(this.myPolygon); this.myPolygon = ''; } var myPolygon=''; var myOverlay = [ new BMap.Point(116.256515,39.995242), new BMap.Point(116.502579,39.951893), new BMap.Point(116.256515,39.866882) ]; //刪除多邊形 var removeMarker = function(e,ee,marker){ map.removeOverlay(marker); for (var i = 0; i < overlays.length; i++) { if (overlays[i] == marker){ overlays.splice(i,1);; } } } //載入多邊形 function loadMyOverlay (){ var map = this.map; //清空現在有的多邊形 clearAll(); map.centerAndZoom(this.poi, 11); var myPolygon = new BMap.Polygon(this.myOverlay, this.styleOptions); this.myPolygon = myPolygon; try{myPolygon.enableEditing();}catch(e){}; //myPolygon.addEventListener("lineupdate",function(e){ //}); map.addOverlay(myPolygon); //將載入的多邊形儲存到數組裡面 overlays.push(myPolygon); //建立右鍵選單 var markerMenu=new BMap.ContextMenu(); markerMenu.addItem(new BMap.MenuItem('刪除',removeMarker.bind(myPolygon))); myPolygon.addContextMenu(markerMenu); } //城市級別地圖 function getcs(csdict){ this.map.centerAndZoom(csdict, 12); } </script> </body> </html> </script>