一、百度地圖AK密鑰申請
1、密鑰申請地址：http://lbsyun.baidu.com/apiconsole/key
2、密鑰申請配置：
（1）應用類型：瀏覽器端；
（2）白名單：無限制的話填 * 號；提交即可，系統會返回一個應用AK;
3、獲取地圖多邊形點坐標代碼 - 純js
<!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: 300px;height: 100%;overflow: hidden;} #result {border-left:1px dotted #999;height:100%;width:295px;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=百度地圖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" /> <!--加載檢索信息窗口--> <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script> <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_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 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> <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;"> <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> <div id="panel" style="position:absolute;"></div> </div> </div> <div id="result"> <dl> <dt>繪制工具功能</dt> <ul> <li><label><input type="radio" name="openClose1" onclick="drawingManager.open()"/>打開</label> <label><input type="radio" name="openClose1" onclick="drawingManager.close()" checked="checked"/>關閉</label></li> </ul> </dd> <dt>是否進行線或面積的計算(單位米)</dt> <ul> <li><label><input type="radio" name="openClose" onclick="drawingManager.enableCalculate()"/>打開</label> <label><input type="radio" name="openClose" onclick="drawingManager.disableCalculate()" checked="checked"/>關閉</label></li> </ul> </dd> <dt>繪制功能</dt> <dd> <ul> <li> <label><input type="radio" name="drawmode" onclick="drawingManager.setDrawingMode(BMAP_DRAWING_MARKER)" checked="checked"/>畫點</label> <input type="checkbox" id="isInfowindow"/> 是否帶信息窗口 </li> <li> <label><input type="radio" name="drawmode" onclick="drawingManager.setDrawingMode(BMAP_DRAWING_CIRCLE)"/>畫圓</label> </li> <li> <label><input type="radio" name="drawmode" onclick="drawingManager.setDrawingMode(BMAP_DRAWING_POLYLINE)"/>畫線</label> </li> <li> <label><input type="radio" name="drawmode" onclick="drawingManager.setDrawingMode(BMAP_DRAWING_POLYGON)"/>畫多邊形</label> </li> <li> <label><input type="radio" name="drawmode" onclick="drawingManager.setDrawingMode(BMAP_DRAWING_RECTANGLE)"/>畫矩形</label> </li> </ul> </dd> <dt>覆蓋物操作</dt> <dd> <ul> <li> <input type="button" value="獲取繪制的覆蓋物個數" onclick="alert(overlays.length)"/> <input type="button" value="清除所有覆蓋物" onclick="clearAll()"/> <input type="button" value="獲取最后一個覆蓋物信息" id="getLastOverLay"/> </li> </ul> </dd> </dl> <br> <!-- 搜索地名 --> 輸入地名：<input type="text" id="districtName" style="width:80px" value="重慶市"> <input type="button" onclick="getDW()" value="搜索"> </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(); $("getLastOverLay").onclick = function(){ if(overlays.length){ alert(overlays[overlays.length - 1]); }else{ alert("沒有覆蓋物"); } } //信息窗口的內容定義 var content = '<div style="margin:0;line-height:20px;padding:2px;">' + '地址：北京市海淀區上地十街10號<br/>電話：(010)59928888<br/>簡介：百度大廈位於北京市海淀區西二旗地鐵站附近，為百度公司綜合研發及辦公總部。' + '</div>'; //創建帶信息窗口的poi點 var searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, { title : "百度大廈", //標題 width : 290, //寬度 height : 105, //高度 panel : "panel", //檢索結果面板 enableAutoPan : true, //自動平移 searchTypes :[ BMAPLIB_TAB_SEARCH, //周邊檢索 BMAPLIB_TAB_TO_HERE, //到這里去 BMAPLIB_TAB_FROM_HERE //從這里出發 ] }); var overlays = []; //回調獲得覆蓋物信息 var overlaycomplete = function(e){ overlays.push(e.overlay); var result = ""; result = "<p>"; result += e.drawingMode + ":"; if (e.drawingMode == BMAP_DRAWING_MARKER) { result += ' 坐標：' + e.overlay.getPosition().lng + ',' + e.overlay.getPosition().lat; if ($('isInfowindow').checked) { searchInfoWindow.open(e.overlay); } } if (e.drawingMode == BMAP_DRAWING_CIRCLE) { result += ' 半徑：' + e.overlay.getRadius(); result += ' 中心點：' + e.overlay.getCenter().lng + "," + e.overlay.getCenter().lat; } if (e.drawingMode == BMAP_DRAWING_POLYLINE || e.drawingMode == BMAP_DRAWING_POLYGON || e.drawingMode == BMAP_DRAWING_RECTANGLE) { result += ' 所畫的點個數：' + e.overlay.getPath().length + '<br>'; /** 獲取多邊形的點坐標 **/ for(var i =0; i < e.overlay.getPath().length; i++){ result += '坐標xy-'+i +': ' + e.overlay.getPath()[i].lng + ',' + e.overlay.getPath()[i].lat +'<br>'; } } result += "</p>"; $("showOverlayInfo").style.display = "none"; $("panel").innerHTML += result; //將繪制的覆蓋物信息結果輸出到結果面板 }; var styleOptions = { strokeColor:"red", //邊線顏色。 fillColor:"red", //填充顏色。當參數為空時，圓形將沒有填充效果。 strokeWeight: 3, //邊線的寬度，以像素為單位。 strokeOpacity: 0.8, //邊線透明度，取值范圍0 - 1。 fillOpacity: 0.6, //填充的透明度，取值范圍0 - 1。 strokeStyle: 'solid' //邊線的樣式，solid或dashed。 } //實例化鼠標繪制工具 var drawingManager = new BMapLib.DrawingManager(map, { isOpen: false, //是否開啟繪制模式 enableDrawingTool: true, //是否顯示工具欄 drawingToolOptions: { anchor: BMAP_ANCHOR_TOP_RIGHT, //位置 offset: new BMap.Size(5, 5), //偏離值 scale: 0.8 //工具欄縮放比例 }, circleOptions: styleOptions, //圓的樣式 polylineOptions: styleOptions, //線的樣式 polygonOptions: styleOptions, //多邊形的樣式 rectangleOptions: 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 } var isPanelShow = false; //顯示結果面板動作 $("showPanelBtn").onclick = showPanel; function showPanel(){ if (isPanelShow == false) { isPanelShow = true; $("showPanelBtn").style.right = "230px"; $("panelWrap").style.width = "230px"; $("map").style.marginRight = "230px"; $("showPanelBtn").innerHTML = "隱藏繪制結果信息<br/>>"; } else { isPanelShow = false; $("showPanelBtn").style.right = "0px"; $("panelWrap").style.width = "0px"; $("map").style.marginRight = "0px"; $("showPanelBtn").innerHTML = "顯示繪制結果信息<br/><"; } } //小區域-搜索地名 function getDW(){ var bdary = new BMap.Boundary(); var name = document.getElementById("districtName").value; var local = new BMap.LocalSearch(map, { renderOptions:{map: map} }); local.setMarkersSetCallback(function(pois){ map.clearOverlays();//清除所有覆蓋物后，在疊加第一個點 var marker = new BMap.Marker(pois[0].point); map.addOverlay(marker); }) local.search(name); map.clearOverlays(); } </script> </body> </html> </script>
4、將代碼復制到本地文件，保存為html格式文件；
5、替換html文件中“百度地圖AK”為自己申請的AK密鑰即可；
6、直接在瀏覽器中打開html文件，效果如下；
至此收工！
參考鏈接：https://blog.csdn.net/zzq900503/article/details/21714491