一、百度地圖的引用:首先要注冊百度開發者賬號,獲得一個密鑰后就可引用下面的js來調取百度地圖;
二、百度地圖電子圍欄的設置
1、設置電子圍欄,個人的思路是先取到鼠標繪制的所有點的坐標,然后儲存到數據庫中,
// 百度地圖API功能 var map = new BMap.Map('map'); var poi = new BMap.Point(116.307852, 40.057031); map.centerAndZoom(poi, 16);//設置中心點坐標和地圖級別 map.enableScrollWheelZoom();//啟用鼠標滾動對地圖放大縮小 map.addControl(new BMap.NavigationControl()); //鼠標繪制完成回調方法 獲取各個點的經緯度 var overlays = []; var mlnglat = []; overlaycomplete = function (e) { overlays.push(e.overlay); var path = e.overlay.getPath();//Array<Point> 返回多邊型的點數組 for (var i = 0; i < path.length; i++) { mlnglat.push("lng:" + path[i].lng + ",lat:" + path[i].lat); } }; $('#NF-add').on('click', function () { if (mlnglat.length == 0) { alert("請先設置電子圍欄!"); } else { alert(mlnglat); } }); 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), //偏離值 }, polygonOptions: styleOptions, //多邊形的樣式 }); //添加鼠標繪制工具監聽事件,用於獲取繪制結果 drawingManager.addEventListener('overlaycomplete', overlaycomplete);
2、刪除電子圍欄
$('#NF-delete').on('click', function () { for (var i = 0; i < overlays.length; i++) { map.removeOverlay(overlays[i]); } overlays.length = 0 });
3、顯示電子圍欄
function treeView() { $("#itemTree").treeview({ url: "#", onnodeclick: function (item) { var RegionId = $("#itemTree").getCurrentNode().id; $.get("#", { "keyValue": RegionId }, function (data) { var Rdata = eval("(" + data + ")"); if (Rdata) { map.removeOverlay(polyLine); var Rlnglat = []; Rlnglat = Rdata.POLYGON.split(','); var points = []; var points2 = []; for (var i = 0; i < Rlnglat.length; i++) { points.push(Rlnglat[i].replace('|', ',')); points2.push(points[i].split(',')); } var polyLinePoints = []; for (var i = 0; i < points2.length; i++) { var po = new BMap.Point(points2[i][0],points2[i][1]); polyLinePoints.push(po); } polyLine = new BMap.Polygon(polyLinePoints, { strokeColor: "red", fillColor: "red", strokeWeight: 3, strokeOpacity: 0.8 }); map.addOverlay(polyLine); } else { alert(1); } }); } }); }