百度地图调用及电子围栏设置

一、百度地图的引用：首先要注册百度开发者账号，获得一个密钥后就可引用下面的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);
                    }
                });
            }
        });
    }