百度地图API电子围栏功能的具体实现

function initializeBMap() { // 初始化地图
    var map = new BMap.Map(document.getElementById("map_canvas"));
    var poi = new BMap.Point(113.96362783387117, 22.580184132819717);
    map.centerAndZoom(poi, 12);
    map.enableScrollWheelZoom();
    //添加平移缩放控件的缩放功能
    var opts = {type: BMAP_NAVIGATION_CONTROL_ZOOM};
    map.addControl(new BMap.NavigationControl(opts));
    //添加比例尺控件
    var opts1 = {offset: new BMap.Size(500, 5)};//因为有百度API的版权信息，控件偏移量位500正合适
    map.addControl(new BMap.ScaleControl(opts1));

    var overlays = [];
    var overlaycomplete = function (e) {
        overlays.push(e.overlay);
        //获取绘制的类型
        console.log(overlays[0].getPath());
        console.log(e.drawingMode); //获取绘制图形的类型
        if (e.drawingMode === "circle") { //如果绘制的是圆形标记
            console.log(e.overlay.getCenter());
            console.log(e.overlay.getCenter().lat);
            console.log(e.overlay.getRadius()+"半径");
            var centerPoint = e.overlay.getCenter();//获取绘制圆形的中心坐标
            var radius = e.overlay.getRadius(); //获取绘制圆形的半径
            addBCircle(centerPoint, radius, function() {//这里是如果是圆形所需要进行的方法，具体的方法就不写了，看情况
                map.removeOverlay(e.overlay);//执行完毕后清除所绘制的图形
            })
        }
        if (e.drawingMode === "polygon") {//如果绘制的是多边形标记
            var array = e.overlay.getPath();//获取绘制多边形的点数组
            addBPolygon(array, function() {//这里是如果是多边形所需要进行的方法，具体的方法就不写了，看情况
                map.removeOverlay(e.overlay);//执行完毕后清除所绘制的图形
            });
        }
        if (e.drawingMode === "polyline") {//如果绘制的是折线型标记
            var array = e.overlay.getPath();//获取绘制多折线型的点数组
            addBPolyline(array, function() {//这里是如果是折线所需要进行的方法，具体的方法就不写了，看情况
                map.removeOverlay(e.overlay);//执行完毕后清除所绘制的图形
            })
        }
    };

    var styleOptions = {
        strokeColor: "red",    //边线颜色。
        fillColor: "red",      //填充颜色。当参数为空时，圆形将没有填充效果。
        strokeWeight: 1,       //边线的宽度，以像素为单位。
        strokeOpacity: 0.5,	   //边线透明度，取值范围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), //偏离值
            drawingModes: [
                // BMAP_DRAWING_MARKER,
                BMAP_DRAWING_CIRCLE,
                BMAP_DRAWING_POLYLINE,
                /*BMAP_DRAWING_RECTANGLE,*/
                BMAP_DRAWING_POLYGON
            ],
            drawingTypes : [
                // BMAP_DRAWING_MARKER, //点的样式
                BMAP_DRAWING_CIRCLE,//圆的样式
                BMAP_DRAWING_POLYLINE,//折线的样式
                // BMAP_DRAWING_RECTANGLE, //矩形的样式
                BMAP_DRAWING_POLYGON //多边形的样式
            ]
        },
        // BMAP_DRAWING_MARKER: styleOptions, //点的样式
        circleOptions: styleOptions, //圆的样式
        polylineOptions: styleOptions, //线的样式
        polygonOptions: styleOptions, //多边形的样式
        // rectangleOptions: styleOptions //矩形的样式
    });
    //添加鼠标绘制工具监听事件，用于获取绘制结果
    //这里的添加鼠标绘制工具监听事件，用于获取绘制结果，实际上就是在这里把多边形的顶点放入overlays这个对象中
    drawingManager.addEventListener('overlaycomplete', overlaycomplete);


    // overlays[0].getPath();
    //执行下面这个方法，可以清除地图上的所有覆盖物
    function clearAll() {
        for (var i = 0; i < overlays.length; i++) {
            map.removeOverlay(overlays[i]);
        }
        overlays.length = 0
    }
}