最基礎(chǔ)的圍欄展示效果： 以下所有參考學(xué)習(xí)，也可以先看看百度API了解。具體代碼實(shí)現(xiàn)如下：

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

2. 圍欄新增代碼案例可簡單看一下： //百度地圖API功能 var map = new BMap.Map('allmap'); map.centerAndZoom("北京",12); // 初始化地圖,設(shè)置城市和地圖級別。 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", //填充顏色。當(dāng)參數(shù)為空時，圓形將沒有填充效果。strokeWeight: 1, //邊線的寬度，以像素為單位。strokeOpacity: 0.3, //邊線透明度，取值范圍0 - 1。fillOpacity: 0.3, //填充的透明度，取值范圍0 - 1。strokeStyle: 'solid' //邊線的樣式，solid或dashed。 }; // 實(shí)例化鼠標(biāo)繪制工具 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 //矩形的樣式}); //添加鼠標(biāo)繪制工具監(jiān)聽事件，用于獲取繪制結(jié)果 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.以下是圍欄的展示所有圍欄的 運(yùn)行代碼，每個人數(shù)據(jù)庫設(shè)置的不一樣 代碼也會不同，這是個參考，如果和我的一樣可直接拿去用 // 查詢當(dāng)前所有圍欄信息 $.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; // 點(diǎn)位var shape = data.data[i].SHAPE; // 形狀if(shape=="1"){ // 圓形var pot = [];pot = point.split(";");// 圓半徑點(diǎn)通過分號分割pot1=pot[0].split(",");map.centerAndZoom(new BMap.Point(pot1[0],pot1[1]), 12); // 分割后的坐標(biāo)作為起始坐標(biāo)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(";");// 坐標(biāo)點(diǎn)通過分號分割for (var j=0;j<str.length;j++) // 循環(huán)數(shù)組{ map.centerAndZoom(new BMap.Point(str[j].split(",")[0],str[j].split(",")[1]), 12); // 分割后的坐標(biāo)作為起始坐標(biāo)arrPois.push(new BMap.Point(str[j].split(",")[0],str[j].split(",")[1]));// 循環(huán)數(shù)組中每一組的坐標(biāo)}polyLine = new BMap.Polygon(arrPois, {strokeColor:"red",fillColor:"red", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});// 展示圍欄map.addOverlay(polyLine); }}}else {bootbox.alert("沒有相關(guān)信息", function () {}); }} else {bootbox.alert("沒有查詢結(jié)果或無權(quán)查看", function () {});}} });

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。