百度地圖調用及電子圍欄設置


一、百度地圖的引用:首先要注冊百度開發者賬號,獲得一個密鑰后就可引用下面的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);
                    }
                });
            }
        });
    }

 




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM