百度地圖調用電子圍欄API實作案例

最基礎的圍欄展示效果： 以下所有參考學習，也可以先看看百度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 () {});
      }
   }
});