最基礎的圍欄展示效果： 以下所有參考學習，也可以先看看百度API了解。具體代碼實現如下：

1.以下是用百度地圖 索要引用的 js

2. 圍欄新增代碼案例可簡單看一下： //百度地圖API功能 var map = new BMap.Map('allmap'); map.centerAndZoom("北京",12); // 初始化地圖,設置城市和地圖級別。 map.enableScrollWheelZoom(); map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); map.clearOverlays(); //清除地圖上所有覆蓋物var overlays = []; var overlaycomplete = function(e){overlays.push(e.overlay); }; var styleOptions = {strokeColor:"red", //邊線顏色。fillColor:"red", //填充顏色。當參數為空時，圓形將沒有填充效果。strokeWeight: 1, //邊線的寬度，以像素為單位。strokeOpacity: 0.3, //邊線透明度，取值范圍0 - 1。fillOpacity: 0.3, //填充的透明度，取值范圍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(100, 10), //偏離值},circleOptions: styleOptions, //圓的樣式polylineOptions: styleOptions, //線的樣式polygonOptions: styleOptions, //多邊形的樣式rectangleOptions: styleOptions //矩形的樣式}); //添加鼠標繪制工具監聽事件，用于獲取繪制結果 drawingManager.addEventListener('overlaycomplete', overlaycomplete); function clearAll() {for(var i = 0; i < overlays.length; i++){map.removeOverlay(overlays[i]);}overlays.length = 0;map.clearOverlays();this.drawingManager.close();this.drawingManager._map.enableDoubleClickZoom(); } var mypoints = ""; var tempoint = []; var result= "";var allOverlay = map.getOverlays();for (var i = 0; i < allOverlay.length ; i++) {if (allOverlay[i].toString() == "[object Polygon]") {// 矩形for (var num = 0; num < allOverlay[i].getPath().length; num++) {if (num != allOverlay[i].getPath().length - 1) {tempoint += allOverlay[i].getPath()[num].lng + "," + allOverlay[i].getPath()[num].lat + ";";}else {tempoint += + allOverlay[i].getPath()[num].lng + "," + allOverlay[i].getPath()[num].lat;}}mypoints = tempoint;document.getElementById('POINT').value = mypoints;// 分別拿到值 放到point Value中} else if (allOverlay[i].toString() == "[object Circle]") {// 圓形result += allOverlay[i].getCenter().lng + "," + allOverlay[i].getCenter().lat + ";"; result += allOverlay[i].getRadius(); document.getElementById('POINT').value = result;}} 3.以下是圍欄的展示所有圍欄的 運行代碼，每個人數據庫設置的不一樣 代碼也會不同，這是個參考，如果和我的一樣可直接拿去用 // 查詢當前所有圍欄信息 $.ajax({url : '<%=basePath%>enclosure/queryEnclosure.do',type : "POST",data : "",success : function(data) {if (data.flag == true){if(data.data != ""){for(var i = 0; i < data.data.length;i++){var point = data.data[i].POINT; // 點位var shape = data.data[i].SHAPE; // 形狀if(shape=="1"){ // 圓形var pot = [];pot = point.split(";");// 圓半徑點通過分號分割pot1=pot[0].split(",");map.centerAndZoom(new BMap.Point(pot1[0],pot1[1]), 12); // 分割后的坐標作為起始坐標var circle = new BMap.Circle(new BMap.Point(pot1[0],pot1[1]),pot[1],{fillColor:"red", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});map.addOverlay(circle);} else if(shape == "2" || shape == "3"){ // 矩形 , 多邊形var str = [];var arrPois = [];var polyLine ="";str = point.split(";");// 坐標點通過分號分割for (var j=0;j<str.length;j++) // 循環數組{ map.centerAndZoom(new BMap.Point(str[j].split(",")[0],str[j].split(",")[1]), 12); // 分割后的坐標作為起始坐標arrPois.push(new BMap.Point(str[j].split(",")[0],str[j].split(",")[1]));// 循環數組中每一組的坐標}polyLine = new BMap.Polygon(arrPois, {strokeColor:"red",fillColor:"red", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});// 展示圍欄map.addOverlay(polyLine); }}}else {bootbox.alert("沒有相關信息", function () {}); }} else {bootbox.alert("沒有查詢結果或無權查看", function () {});}} });

總結

以上是生活随笔為你收集整理的百度地图调用电子围栏API实现案例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。