// 事件设置
var mapConfig = {
    // 网格开始编辑回调事件
    onGridStartEdit: function (baiduMap) {
    },
    // 网格结束编辑回调事件
    onGridStopEdit: function (gridArray) {
    }
}
// BMap
// BMapGL

function BaiduMap(mapId, mapConfig) {
    mapConfig.enableMapClick = false
    this.map = new BMap.Map(mapId, mapConfig);
    this.mapId = mapId;
    this.defaultLng = 116.280190;
    this.defaultLat = 40.049191;
    this.defaultZoom = 19;
    this.startMarker = null,
        this.const = {
            START_MARKER_ICON: 'images/marker.png',
            color: {
                GREEN: '#009688',
                BLUE: '#1E9FFF',
                ORANGE: '#FFB800',
                RED: '#FF5722',
                CYAN: '#2F4056',
                BLACK: '#393D49'
            }
        };
    // 标签数组
    this.labelArray = [];
    // 网格操作
    this.gridOption = {
        const: {
            RELATION_NAME_ID: 'B_GRID_RELATION_NAME',
            START_BTN_ID: 'B_GRID_START_BTN',
            CANCEL_BTN_ID: 'B_GRID_CANCEL_BTN',
            RIGHT_BOX_ID: 'B_GRID_RIGHT_BOX',
            RIGHT_BOX_WIDTH: 80,
            RIGHT_BOX_HEIGHT: 94,
            SAVE_BTN_ID: 'B_GRID_SAVE_BTN',
            REMOVE_BTN_ID: 'B_GRID_REMOVE_BTN',
            EDIT_BTN_ID: 'B_GRID_EDIT_BTN',
            STOP_EDIT_BTN_ID: 'B_GRID_STOP_EDIT_BTN',
            COLOR_CHOICE_BTN_ID: 'B_COLOR_CHOICE_BTN_ID',
            STROKE_COLOR: '#0000FF',
            STROKE_BACKGROUND_COLOR: '#000000',
            STROKE_WEIGHT: 1,
            STROKE_BACKGROUND_WEIGHT: 1,
            STROKE_WEIGHT_FOCUS: 2,
            STROKE_OPACITY: 0.5,
            STROKE_BACKGROUND_OPACITY: 0.5,
            FILL_COLOR: '#000000',
            FILL_BACKGROUND_COLOR: '#FFFFFF',
            FILL_OPACITY: '0.6',
            FILL_BACKGROUND_OPACITY: '0.3',
            LABEL_FONT_SIZE: 12,
            GRID_ID_PREFIX: 'GRID_'
        },
        isEdit: false,
        editGrid: {
            polygon: null,
            isEdit: false,
            color: '#000000',
            pointArray: []
        },
        gridArray: []
    };
    this.colorOption = {
        edit: {r: 0, g: 0, b: 0},
        const: {
            COLOR_BOX_ID: 'B_COLOR_BOX',
            COLOR_SHOW_BOX_ID: 'B_SHOW_COLOR_BOX',
            COLOR_R: 'B_COLOR_R',
            COLOR_G: 'B_COLOR_G',
            COLOR_B: 'B_COLOR_B',
        }
    };
    this.mapConfig = mapConfig;
    this.relationGroup = null;
}

// 关联
BaiduMap.Relation = function (id, name) {
    this.id = id;
    this.name = name;
}
// 关联组
BaiduMap.RelationGroup = function (relationArray) {
    this.relationArray = relationArray;
    this.relationIdArray = [];
    this.relationNameArray = [];
    this.relationIds = '';
    this.relationNames = '';

    for (var i = 0, relation; relation = relationArray[i++];) {
        this.relationIdArray.push(relation.id);
        this.relationNameArray.push(relation.name);
        if (this.relationIds.length > 0) {
            this.relationIds += ',';
            this.relationNames += ',';
        }
        this.relationIds += relation.id;
        this.relationNames += relation.name;
    }
}
// 网格信息
BaiduMap.Grid = function (id, pointArray) {
    this.id = id;
    this.fillColor = '#000000';
    this.relationIdArray = null;
    this.gridName = null;
    this.pointArray = pointArray;
    this.setFillColor = function (fillColor) {
        this.fillColor = fillColor;
    }
    this.setRelationIdArray = function (relationIdArray) {
        this.relationIdArray = relationIdArray;
    }
    this.setGridName = function (gridName) {
        this.gridName = gridName;
    }
    this.setPointArray = function (pointArray) {
        this.pointArray = pointArray;
    }
}
// 点
BaiduMap.Point = function (lng, lat) {
    return new BMap.Point(lng, lat);
}
// 设置用户组
BaiduMap.prototype.setRelationGroup = function (relationArray) {
    var relationNameSpan = document.getElementById(this.gridOption.const.RELATION_NAME_ID);
    if (!relationArray || relationArray.length == 0) {
        this.relationGroup = [];
        relationNameSpan.innerHTML = '';
        return;
    }
    this.relationGroup = new BaiduMap.RelationGroup(relationArray);
    relationNameSpan.innerHTML = '<b>关联：</b>' + this.relationGroup.relationNames;
}
// 颜色RGB转16进制
BaiduMap.prototype.colorRGBToHex = function (r, g, b) {
    var red = parseInt(r, 10).toString(16);
    red = red.length < 2 ? '0' + red : red;
    var green = parseInt(g, 10).toString(16);
    green = green.length < 2 ? '0' + green : green;
    var blue = parseInt(b, 10).toString(16);
    blue = blue.length < 2 ? '0' + blue : blue;
    return "#" + red + green + blue;
}
// 颜色16进制转RGB
BaiduMap.prototype.colorHexToRGB = function (hex) {
    if (!hex) {
        return {r: 0, g: 0, b: 0};
    }
    if (hex.indexOf('#') == 0) {
        hex = hex.substring(1);
    }
    return {
        r: parseInt(hex.substring(0, 2), 16),
        g: parseInt(hex.substring(2, 4), 16),
        b: parseInt(hex.substring(4, 6), 16)
    }
}
// 颜色选择器
BaiduMap.prototype.setShowColor = function () {
    var self = this;
    var colorShowBox = document.getElementById(self.colorOption.const.COLOR_SHOW_BOX_ID);
    var hexColor = self.colorRGBToHex(self.colorOption.edit.r, self.colorOption.edit.g, self.colorOption.edit.b);
    colorShowBox.style.backgroundColor = hexColor;
    self.gridOption.editGrid.polygon.setFillColor(hexColor);
}
// 设置颜色Input值
BaiduMap.prototype.setColorInputValue = function (color) {
    var self = this;
    self.colorOption.edit = self.colorHexToRGB(color);
    document.getElementById(self.colorOption.const.COLOR_R).value = self.colorOption.edit.r;
    document.getElementById(self.colorOption.const.COLOR_G).value = self.colorOption.edit.g;
    document.getElementById(self.colorOption.const.COLOR_B).value = self.colorOption.edit.b;
    var colorShowBox = document.getElementById(self.colorOption.const.COLOR_SHOW_BOX_ID);
    colorShowBox.style.backgroundColor = color;
}
// 初始化颜色选择
BaiduMap.prototype.initColorOption = function () {
    var self = this;

    // 获取颜色选择器
    function getColorInput(inputId, title, value) {
        var colorInput = document.createElement('div');
        colorInput.style.width = '100%';
        colorInput.style.textAlign = 'center';

        var colorInputInput = document.createElement('input');
        colorInputInput.setAttribute('id', inputId);
        colorInputInput.setAttribute('type', 'range');
        colorInputInput.setAttribute('min', 0);
        colorInputInput.setAttribute('max', 255);
        colorInputInput.setAttribute('value', value);
        colorInputInput.style.width = '100px';
        colorInputInput.addEventListener('mousemove', function (event) {
            self.colorOption.edit = {
                r: document.getElementById(self.colorOption.const.COLOR_R).value,
                g: document.getElementById(self.colorOption.const.COLOR_G).value,
                b: document.getElementById(self.colorOption.const.COLOR_B).value
            }
            // 修改区域颜色
            self.setShowColor();
        });
        var titleSpan = document.createElement('span');
        titleSpan.appendChild(document.createTextNode(title));
        colorInput.appendChild(titleSpan);
        colorInput.appendChild(colorInputInput);
        return colorInput;
    }

    // 颜色选BOX
    function getColorInputBox() {
        var colorInputBox = document.createElement('div');
        colorInputBox.style.display = 'table-cell';
        colorInputBox.style.width = '100px';

        var firstColorInput = getColorInput(self.colorOption.const.COLOR_R, '红', self.colorOption.edit.r);
        firstColorInput.style.marginTop = '2px';
        colorInputBox.appendChild(firstColorInput);
        colorInputBox.appendChild(getColorInput(self.colorOption.const.COLOR_G, '绿', self.colorOption.edit.g));
        colorInputBox.appendChild(getColorInput(self.colorOption.const.COLOR_B, '蓝', self.colorOption.edit.b));
        return colorInputBox;
    }

    // 颜色BOX
    function getColorBox(colorOptionBox) {
        var colorBox = document.createElement('div');
        colorBox.setAttribute('id', self.colorOption.const.COLOR_SHOW_BOX_ID);
        colorBox.style.display = 'table-cell';
        colorBox.style.width = '70px';
        colorBox.style.height = '100%';
        colorBox.style.borderRight = '1px solid silver';
        colorBox.style.backgroundColor = self.colorRGBToHex(self.colorOption.edit.r, self.colorOption.edit.g, self.colorOption.edit.b);
        return colorBox;
    }

    var colorOptionBox = document.createElement('div');
    colorOptionBox.setAttribute('id', self.colorOption.const.COLOR_BOX_ID);
    colorOptionBox.style.backgroundColor = '#FFFFFF';
    colorOptionBox.style.display = 'none';
    colorOptionBox.style.width = '210px';
    colorOptionBox.style.height = '70px';
    colorOptionBox.style.border = '1px solid silver';
    colorOptionBox.style.position = 'absolute';
    colorOptionBox.style.top = '0';
    colorOptionBox.style.left = '0';
    colorOptionBox.style.zIndex = 102;
    colorOptionBox.appendChild(getColorBox());
    colorOptionBox.appendChild(getColorInputBox());
    var mapContainer = document.getElementById(this.mapId);
    mapContainer.appendChild(colorOptionBox);
}
BaiduMap.prototype.showColorOptionBox = function () {
    var colorBox = document.getElementById(this.colorOption.const.COLOR_BOX_ID);
    if (!colorBox) {
        return;
    }
    colorBox.style.display = 'inline-table';
}
BaiduMap.prototype.hideColorOptionBox = function () {
    var colorBox = document.getElementById(this.colorOption.const.COLOR_BOX_ID);
    if (!colorBox) {
        return;
    }
    colorBox.style.display = 'none';
}
// 获取中心点
BaiduMap.prototype.getCenterPoint = function (pathPointArray) {
    var lng = 0.0;
    var lat = 0.0;
    for (var i = 0, pathPoint; pathPoint = pathPointArray[i++];) {
        lng = lng + parseFloat(pathPoint.lng);
        lat = lat + parseFloat(pathPoint.lat);
    }
    lng = lng / pathPointArray.length;
    lat = lat / pathPointArray.length;
    return new BMap.Point(lng, lat);
}
// 设置标签字体大小
BaiduMap.prototype.setLabelFontSize = function (size) {
    // 全部隐藏
    if (size === 0) {
        for (var i = 0, label; label = this.labelArray[i++];) {
            label.hide();
        }
        return;
    }
    for (var i = 0, label; label = this.labelArray[i++];) {
        label.show();
        label.setOffset(new BMap.Size(-label.content.length * size / 2, -size / 2));
    }
}
// 获得Map对象
BaiduMap.prototype.getMap = function () {
    return this.map;
}
// 设置中心点和缩放比例
BaiduMap.prototype.setCenterAndZoom = function (point, zoom) {
    var centerPoint;
    if (point) {
        centerPoint = new BMap.Point(point.lng ? point.lng : this.defaultLng, point.lat ? point.lat : this.defaultLat);
    } else {
        centerPoint = new BMap.Point(this.defaultLng, this.defaultLat);
    }
    this.map.centerAndZoom(centerPoint, zoom ? zoom : this.defaultZoom);
}
// 设置默认配置
BaiduMap.prototype.setDefaultConfig = function () {
    var self = this;
    self.map.enableScrollWheelZoom(true);
    self.map.enableAutoResize();
    self.map.setDefaultCursor('grab');
    // 取消双击缩放
    self.map.disableDoubleClickZoom();
    // 精度控件
    // self.map.addControl(new BMap.ScaleControl({
    //     anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
    //     offset: new BMap.Size(35, 5)
    // }));
    // // 缩放控件
    // self.map.addControl(new BMap.ZoomControl({
    //     anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
    //     offset: new BMap.Size(5, 5)
    // }));
    // 单击事件
    self.map.addEventListener('click', function (event) {
        // 清空右键菜单
        self.hideColorOptionBox();
        self.hideRightOptionBox();
    })
    // 开始拖拽
    self.map.addEventListener('dragstart', function (event) {
        this.setDefaultCursor('grabbing');
        self.hideColorOptionBox();
        self.hideRightOptionBox();
    });
    // 取消拖拽
    self.map.addEventListener('dragend', function (event) {
        if (self.gridOption.isEdit) {
            this.setDefaultCursor('pointer');
        } else {
            this.setDefaultCursor('grab');
        }
    });
    // 缩放结束
    self.map.addEventListener('zoomend', function (event) {
        var zoom = this.getZoom();
        if (zoom < 15) {
            self.setLabelFontSize(0);
        } else {
            self.setLabelFontSize(12);
        }
    })
}
// 通过ID删除网格
BaiduMap.prototype.removeGridById = function (removeId) {
    var self = this;
    for (var i = 0; i < self.gridOption.gridArray.length; i++) {
        var grid = self.gridOption.gridArray[i];
        if (grid.id == removeId) {
            self.gridOption.gridArray.splice(i, 1);
            i--;
            break;
        }
    }
}
// 保存网格
BaiduMap.prototype.saveGrid = function (saveGrid) {
    var self = this;
    for (var i = 0; i < self.gridOption.gridArray.length; i++) {
        var grid = self.gridOption.gridArray[i];
        if (grid.id == saveGrid.id) {
            grid.pointArray = saveGrid.pointArray;
            grid.setFillColor(saveGrid.fillColor);
            return;
        }
    }
    self.gridOption.gridArray.push(saveGrid);
}
// 通过ID获取网格
BaiduMap.prototype.getGridById = function (gridId) {
    var self = this;
    for (var i = 0; i < self.gridOption.gridArray.length; i++) {
        var grid = self.gridOption.gridArray[i];
        if (grid.id == gridId) {
            return grid;
        }
    }
    return null;
}
// 设置a按钮标签基础属性
BaiduMap.prototype.setABtnElementAttribute = function (aElement, aId, aText, backgroundColor) {
    aElement.appendChild(document.createTextNode(aText));
    aElement.setAttribute('id', aId);
    aElement.setAttribute('href', 'javascript:void(0);');
    aElement.style.textDecoration = 'none';
    aElement.style.textAlign = 'center';
    aElement.style.color = '#FFFFFF';
    aElement.style.backgroundColor = backgroundColor ? backgroundColor : this.const.color.GREEN;
    aElement.style.fontSize = '12px';
    aElement.style.margin = '1px';
    aElement.style.padding = '4px';
    aElement.style.lineHeight = '14px';
    aElement.style.borderRadius = '2px';
}
// 构建网格面板
BaiduMap.prototype.hideStopOptionBtn = function () {
    document.getElementById(this.gridOption.const.CANCEL_BTN_ID).style.display = 'none';
}
BaiduMap.prototype.showStopOptionBtn = function () {
    document.getElementById(this.gridOption.const.CANCEL_BTN_ID).style.display = 'inline-block';
}
BaiduMap.prototype.getGridBarBox = function () {
    var self = this;

    // 人员名称
    function getRelationName() {
        var relationNameSpan = document.createElement('span');
        relationNameSpan.setAttribute('id', self.gridOption.const.RELATION_NAME_ID);
        relationNameSpan.style.fontSize = '12px';
        relationNameSpan.style.lineHeight = '24px';
        relationNameSpan.style.marginLeft = '5px';
        return relationNameSpan;
    }

    // 开始编辑按钮
    function getStartOptionBtn() {
        var startOptionBtn = document.createElement('a');
        self.setABtnElementAttribute(startOptionBtn, self.gridOption.const.START_BTN_ID, '开始编辑');
        startOptionBtn.addEventListener('click', function (event) {
            if (self.mapConfig && self.mapConfig.onGridStartEdit) {
                var result = self.mapConfig.onGridStartEdit(self);
                if (result == false) {
                    return;
                }
            }
            self.map.setDefaultCursor('pointer');
            self.gridOption.isEdit = true;
            document.getElementById(self.gridOption.const.START_BTN_ID).style.display = 'none';
            self.showStopOptionBtn();
        });
        return startOptionBtn;
    }

    // 结束编辑按钮
    function getCancelOptionBtn() {
        var cancelOptionBtn = document.createElement('a');
        self.setABtnElementAttribute(cancelOptionBtn, self.gridOption.const.CANCEL_BTN_ID, '结束编辑', self.const.color.RED);
        cancelOptionBtn.style.display = 'none';
        cancelOptionBtn.addEventListener('click', function (event) {
            // 执行网格结束编辑回调
            if (self.mapConfig && self.mapConfig.onGridStopEdit) {
                // 处理关联关系
                if (self.relationGroup) {
                    var gridName = '';
                    var relationIdArray = [];
                    for (var i = 0, item; item = self.relationGroup.relationArray[i++];) {
                        if (gridName.length > 0) {
                            gridName += ',';
                        }
                        gridName += item.name;
                        relationIdArray.push(item.id);
                    }
                    for (var i = 0, item; item = self.gridOption.gridArray[i++];) {
                        item.setGridName(gridName);
                        item.setRelationIdArray(relationIdArray);
                    }
                }
                var result = self.mapConfig.onGridStopEdit(self.gridOption.gridArray);
                if (result == false) {
                    return;
                }
            }
            self.map.setDefaultCursor('grab');
            self.gridOption.isEdit = false;
            self.hideStopOptionBtn();
            document.getElementById(self.gridOption.const.START_BTN_ID).style.display = 'inline-block';
        });
        return cancelOptionBtn;
    }

    // 初始化按钮组
    function initGridBarBtnGroup(gridBarBox) {
        gridBarBox.appendChild(getStartOptionBtn());
        gridBarBox.appendChild(getCancelOptionBtn());
        gridBarBox.appendChild(getRelationName());
    }

    var gridBarBox = document.createElement('div');
    gridBarBox.style.backgroundColor = '#FFFFFF';
    gridBarBox.style.padding = '5px';
    gridBarBox.style.minWidth = '58px';
    gridBarBox.style.height = '25px';
    gridBarBox.style.border = '1px solid silver';
    gridBarBox.style.position = 'absolute';
    gridBarBox.style.top = '0';
    gridBarBox.style.left = '0';
    gridBarBox.style.zIndex = 100;
    initGridBarBtnGroup(gridBarBox);
    return gridBarBox;
}
// 网格右键菜单
BaiduMap.prototype.getGridPathPointByPolygon = function (polygon) {
    var pathPointArray = polygon.getPath();
    if (pathPointArray.length == 0) {
        return [];
    }
    // 如果最后一个节点和第一个相等则去除
    var firstPoint = pathPointArray[0];
    var lastPoint = pathPointArray[pathPointArray.length - 1];
    if (firstPoint.lng == lastPoint.lng && firstPoint.lat == lastPoint.lat) {
        return pathPointArray.splice(0, pathPointArray.length - 1);
    }
    return pathPointArray;
}
BaiduMap.prototype.getGridOptionRightBox = function () {
    var self = this;

    // 获取区域路径节点
    function getGridPathPoint() {
        return self.getGridPathPointByPolygon(self.gridOption.editGrid.polygon);
    }

    // 清除编辑网格
    function clearEditGrid() {
        self.gridOption.editGrid.isEdit = false;
        self.gridOption.editGrid.polygon.disableEditing();
        self.gridOption.editGrid.polygon = null;
        self.gridOption.editGrid.pointArray = [];
        self.hideRightOptionBox();
    }

    // 网格右键菜单保存按钮
    function getSaveOptionBtn() {
        var saveOptionBtn = document.createElement('a');
        self.setABtnElementAttribute(saveOptionBtn, self.gridOption.const.SAVE_BTN_ID, '保存', self.const.color.BLUE);
        saveOptionBtn.style.display = 'block';
        saveOptionBtn.addEventListener('click', function (event) {
            // 更新数组
            var pointArray;
            if (self.gridOption.editGrid.isEdit) {
                pointArray = getGridPathPoint();
            } else {
                pointArray = self.gridOption.editGrid.pointArray;
            }
            var grid = new BaiduMap.Grid(self.gridOption.editGrid.polygon.id, pointArray);
            grid.setFillColor(self.gridOption.editGrid.polygon.getFillColor());
            self.saveGrid(grid);
            self.gridOption.editGrid.polygon.setStrokeWeight(self.gridOption.const.STROKE_WEIGHT);
            document.getElementById(self.gridOption.const.STOP_EDIT_BTN_ID).style.display = 'none';
            document.getElementById(self.gridOption.const.EDIT_BTN_ID).style.display = 'block';
            clearEditGrid();
            self.showStopOptionBtn();
        });
        return saveOptionBtn;
    }

    // 网格右键菜单删除按钮
    function getRemoveOptionBtn() {
        var removeOptionBtn = document.createElement('a');
        self.setABtnElementAttribute(removeOptionBtn, self.gridOption.const.REMOVE_BTN_ID, '删除', self.const.color.RED);
        removeOptionBtn.style.display = 'block';
        removeOptionBtn.addEventListener('click', function (event) {
            self.removeGridById(self.gridOption.editGrid.polygon.id);
            self.map.removeOverlay(self.gridOption.editGrid.polygon);
            clearEditGrid();
            self.showStopOptionBtn();
        });
        return removeOptionBtn;
    }

    // 网格右键菜单编辑按钮
    function getEditOptionBtn() {
        var editOptionBtn = document.createElement('a');
        self.setABtnElementAttribute(editOptionBtn, self.gridOption.const.EDIT_BTN_ID, '编辑', self.const.color.GREEN);
        editOptionBtn.style.display = 'block';
        editOptionBtn.addEventListener('click', function (event) {
            // 开启编辑
            self.gridOption.editGrid.polygon.enableEditing();
            self.gridOption.editGrid.isEdit = true;
            self.hideRightOptionBox();
            this.style.display = 'none';
            document.getElementById(self.gridOption.const.STOP_EDIT_BTN_ID).style.display = 'block';
        });
        return editOptionBtn;
    }

    // 结束编辑按钮
    function getStopEditOptionBtn() {
        var stopEditOptionBtn = document.createElement('a');
        self.setABtnElementAttribute(stopEditOptionBtn, self.gridOption.const.STOP_EDIT_BTN_ID, '结束编辑', self.const.color.GREEN);
        stopEditOptionBtn.style.display = 'none';
        stopEditOptionBtn.addEventListener('click', function (event) {
            // 结束编辑
            self.gridOption.editGrid.polygon.disableEditing();
            self.gridOption.editGrid.isEdit = false;
            // 更新节点
            self.gridOption.editGrid.pointArray = getGridPathPoint();
            self.hideRightOptionBox();
            this.style.display = 'none';
            document.getElementById(self.gridOption.const.EDIT_BTN_ID).style.display = 'block';
        });
        return stopEditOptionBtn;
    }

    // 设置颜色按钮
    function getColorChoiceBtn() {
        var colorChoiceBtn = document.createElement('a');
        self.setABtnElementAttribute(colorChoiceBtn, self.gridOption.const.COLOR_CHOICE_BTN_ID, '选择颜色', self.const.color.ORANGE);
        colorChoiceBtn.style.display = 'block';
        colorChoiceBtn.addEventListener('click', function (event) {
            self.hideRightOptionBox();
            self.showColorOptionBox();
        });
        return colorChoiceBtn;
    }

    // 初始化按钮组
    function initGridOptionBtnGroup(gridOptionRightBox) {
        gridOptionRightBox.appendChild(getSaveOptionBtn());
        gridOptionRightBox.appendChild(getRemoveOptionBtn());
        gridOptionRightBox.appendChild(getEditOptionBtn());
        gridOptionRightBox.appendChild(getStopEditOptionBtn());
        gridOptionRightBox.appendChild(getColorChoiceBtn());
    }

    var gridOptionRightBox = document.createElement('div');
    gridOptionRightBox.setAttribute('id', self.gridOption.const.RIGHT_BOX_ID);
    gridOptionRightBox.style.backgroundColor = '#FFFFFF';
    gridOptionRightBox.style.width = self.gridOption.const.RIGHT_BOX_WIDTH + 'px';
    gridOptionRightBox.style.height = self.gridOption.const.RIGHT_BOX_HEIGHT + 'px';
    gridOptionRightBox.style.border = '1px solid silver';
    gridOptionRightBox.style.position = 'absolute';
    gridOptionRightBox.style.display = 'none';
    gridOptionRightBox.style.top = '0';
    gridOptionRightBox.style.left = '0';
    gridOptionRightBox.style.zIndex = 99;
    initGridOptionBtnGroup(gridOptionRightBox);
    return gridOptionRightBox;
}
// 初始化网格控件
BaiduMap.prototype.initGridOption = function () {
    var mapContainer = document.getElementById(this.mapId);
    mapContainer.setAttribute('position', 'relative');
    mapContainer.appendChild(this.getGridBarBox());
    mapContainer.appendChild(this.getGridOptionRightBox());
}
// 初始化背景网格(参考网格)
BaiduMap.prototype.initBackgroundGrid = function (option) {
    var self = this;
    if (!option || !option.gridArray || option.gridArray.length == 0) {
        return;
    }

    // 添加点击事件
    function addClickEvent(polygon, backgroundGrid) {
        if (!option.onClick) {
            return;
        }
        polygon.addEventListener('click', function (event) {
            option.onClick(backgroundGrid, event);
        });
    }

    for (var i = 0, backgroundGrid; backgroundGrid = option.gridArray[i++];) {
        var polygon = new BMap.Polygon(backgroundGrid.pointArray, {
            strokeColor: self.gridOption.const.STROKE_BACKGROUND_COLOR,
            strokeWeight: self.gridOption.const.STROKE_BACKGROUND_WEIGHT,
            strokeOpacity: self.gridOption.const.STROKE_BACKGROUND_OPACITY,
            fillOpacity: self.gridOption.const.FILL_BACKGROUND_OPACITY,
        });
        if (backgroundGrid.fillColor) {
            polygon.setFillColor(backgroundGrid.fillColor);
        } else {
            polygon.setFillColor(self.gridOption.const.FILL_BACKGROUND_COLOR);
        }
        // 添加点击事件
        self.map.addOverlay(polygon);
        addClickEvent(polygon, backgroundGrid);
        if (!backgroundGrid.label) {
            continue;
        }
        var label = new BMap.Label(backgroundGrid.label);
        label.setStyle({
            border: 'none',
            backgroundColor: 'transparent',
            textShadow: '1px 1px 1px #fff, -1px -1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff',
            fontSize: self.gridOption.const.LABEL_FONT_SIZE + 'px'
        });
        label.setOffset(new BMap.Size(-backgroundGrid.label.length * self.gridOption.const.LABEL_FONT_SIZE / 2, -self.gridOption.const.LABEL_FONT_SIZE / 2));
        label.setPosition(self.getCenterPoint(backgroundGrid.pointArray));
        self.labelArray.push(label);
        self.map.addOverlay(label);
    }
}
// 设置开始标记
BaiduMap.prototype.setStartMarker = function (point) {
    var self = this;
    var marker = new BMap.Marker(point);
    self.startMarker = marker;
    self.map.addOverlay(marker);
}
// 删除开始标记
BaiduMap.prototype.removeStartMarker = function () {
    this.map.removeOverlay(this.startMarker);
}
// 隐藏网格右键菜单
BaiduMap.prototype.hideRightOptionBox = function () {
    var gridOptionRightBox = document.getElementById(this.gridOption.const.RIGHT_BOX_ID);
    if (!gridOptionRightBox) {
        return;
    }
    gridOptionRightBox.style.display = 'none';
}
// 初始化网格事件
BaiduMap.prototype.initPolygonEvent = function (polygon) {
    var self = this;

    function focusPolygon(thisPolygon) {
        self.hideColorOptionBox();
        self.hideStopOptionBtn();
        // 消除原有选中状态
        if (self.gridOption.editGrid.polygon) {
            // 更新节点
            document.getElementById(self.gridOption.const.STOP_EDIT_BTN_ID).style.display = 'none';
            document.getElementById(self.gridOption.const.EDIT_BTN_ID).style.display = 'block';
            // 保存节点
            self.gridOption.editGrid.polygon.setStrokeWeight(self.gridOption.const.STROKE_WEIGHT);
            self.gridOption.editGrid.polygon.disableEditing();
            self.gridOption.editGrid.isEdit = false;
            var grid = new BaiduMap.Grid(self.gridOption.editGrid.polygon.id, self.getGridPathPointByPolygon(self.gridOption.editGrid.polygon));
            grid.setFillColor(self.gridOption.editGrid.polygon.getFillColor());
            self.saveGrid(grid);
        }
        // 标记当前网格选中状态
        thisPolygon.setStrokeWeight(self.gridOption.const.STROKE_WEIGHT_FOCUS);
        // 标记当前网格
        self.gridOption.editGrid.polygon = thisPolygon;
        // 设置网格颜色
        self.setColorInputValue(self.gridOption.editGrid.polygon.getFillColor());
        // 标记当前网格的point数组
        var savedGrid = self.getGridById(thisPolygon.id);
        if (savedGrid) {
            self.gridOption.editGrid.pointArray = savedGrid.pointArray;
        }
    }

    // 网格点击事件
    polygon.addEventListener('click', function (event) {
        // 未开启编辑状态不允许聚焦
        if (!self.gridOption.isEdit) {
            return;
        }
        // 有正在编辑的网格不允许聚焦
        if (self.gridOption.editGrid.isEdit) {
            return;
        }
        focusPolygon(this);
    });
    // 网格右击事件
    polygon.addEventListener('rightclick', function (event) {
        // 未开启编辑状态，不允许显示右键菜单
        if (!self.gridOption.isEdit) {
            return;
        }
        // 当前编辑网格不存在，不允许显示右键菜单
        if (!self.gridOption.editGrid.polygon) {
            return;
        }
        // 已经编辑，网格不一样，不允许显示右键菜单
        if (self.gridOption.editGrid.polygon.id != this.id) {
            return;
        }
        // 这行和上面两个条件开一个
        // focusPolygon(this);
        self.hideColorOptionBox();
        var mapWidth = event.target.map.width;
        var mapHeight = event.target.map.height;
        var clickX = event.pixel.x;
        var clickY = event.pixel.y;
        var rightOptionX = mapWidth - clickX >= self.gridOption.const.RIGHT_BOX_WIDTH ? clickX : clickX - self.gridOption.const.RIGHT_BOX_WIDTH;
        var rightOptionY = mapHeight - clickY >= self.gridOption.const.RIGHT_BOX_HEIGHT ? clickY : clickY - self.gridOption.const.RIGHT_BOX_HEIGHT;
        // 显示右键菜单
        var gridOptionRightBox = document.getElementById(self.gridOption.const.RIGHT_BOX_ID);
        gridOptionRightBox.style.display = 'block';
        gridOptionRightBox.style.top = rightOptionY + 'px';
        gridOptionRightBox.style.left = rightOptionX + 'px';

        // 颜色选择定位
        var colorOptionX = mapWidth - clickX >= 210 ? clickX : clickX - 210;
        var colorOptionY = mapHeight - clickY >= 70 ? clickY : clickY - 70;
        var colocOptionBox = document.getElementById(self.colorOption.const.COLOR_BOX_ID);
        colocOptionBox.style.top = colorOptionY + 'px';
        colocOptionBox.style.left = colorOptionX + 'px';
    });
}
// 初始化网格事件
BaiduMap.prototype.initGridOptionEvent = function () {
    var self = this;

    // 获得网格对象
    function getPolygon() {
        var polygon = new BMap.Polygon(self.gridOption.editGrid.pointArray, {
            strokeColor: self.gridOption.const.STROKE_COLOR,
            strokeWeight: self.gridOption.const.STROKE_WEIGHT_FOCUS,
            strokeOpacity: self.gridOption.const.STROKE_OPACITY,
            fillColor: self.gridOption.const.FILL_COLOR,
            fillOpacity: self.gridOption.const.FILL_OPACITY,
        });
        polygon.id = self.gridOption.const.GRID_ID_PREFIX + new Date().getTime();
        self.initPolygonEvent(polygon);
        return polygon;
    }

    // 绘制网格
    function drawPolygon() {
        if (!self.gridOption.editGrid.polygon) {
            self.gridOption.editGrid.polygon = getPolygon();
            self.map.addOverlay(self.gridOption.editGrid.polygon);
            // 标记开始点
            self.setStartMarker(self.gridOption.editGrid.pointArray[0]);
        } else {
            self.removeStartMarker();
            self.gridOption.editGrid.polygon.setPath(self.gridOption.editGrid.pointArray);
        }
    }

    // 地图双击事件
    self.map.addEventListener('dblclick', function (event) {
        if (!self.gridOption.isEdit) {
            return;
        }
        if (self.gridOption.editGrid.isEdit) {
            return;
        }
        // 隐藏结束编辑按钮
        self.hideStopOptionBtn();
        var point = new BMap.Point(event.point.lng, event.point.lat);
        self.gridOption.editGrid.pointArray.push(point);
        drawPolygon();
        if (self.gridOption.editGrid.pointArray.length >= 3) {
            self.map.setCenter(point);
        }
    });
}
// 清空地图，编辑的时候，不能清空
BaiduMap.prototype.clearMap = function () {
    if (this.gridOption.isEdit) {
        return;
    }
    if (this.gridOption.editGrid.isEdit) {
        return;
    }
    this.map.clearOverlays();
}
// 设置网格，编辑的时候，不能设置网格
BaiduMap.prototype.setGridArray = function (gridArray) {
    var self = this;
    if (self.gridOption.isEdit) {
        return;
    }
    if (self.gridOption.editGrid.isEdit) {
        return;
    }

    function setPolygon(grid) {
        var polygon = new BMap.Polygon(grid.pointArray, {
            strokeColor: self.gridOption.const.STROKE_COLOR,
            strokeWeight: self.gridOption.const.STROKE_WEIGHT,
            strokeOpacity: self.gridOption.const.STROKE_OPACITY,
            fillColor: grid.fillColor,
            fillOpacity: self.gridOption.const.FILL_OPACITY,
        });
        polygon.id = grid.id;
        self.initPolygonEvent(polygon);
        self.map.addOverlay(polygon);
    }

    self.gridOption.gridArray = [];
    if (!gridArray || gridArray.length == 0) {
        return;
    }
    // 清空原网格
    for (var i = 0, item; item = gridArray[i++];) {
        if (!item.pointArray || item.pointArray.length == 0) {
            continue;
        }
        var pointArray = [];
        for (var j = 0, jItem; jItem = item.pointArray[j++];) {
            pointArray.push(new BaiduMap.Point(jItem.lng, jItem.lat));
        }
        var grid = new BaiduMap.Grid(item.gridId, pointArray);
        grid.setFillColor(item.fillColor);
        self.gridOption.gridArray.push(grid);
        setPolygon(grid);
    }
}

BaiduMap.prototype.markWithUserAvatarWithTitle = function(map, point, avatar, title) {

    function UserAvatar(map, point, avatar, title) {
        this.baiduMap = map;
        this.point = point;
        this.avatar = avatar;
        this.title = title;
    }

    UserAvatar.prototype = new BMap.Overlay();
    UserAvatar.prototype.initialize = function () {
        var self = this;
        var userAvatarBox = this.userAvatarBox = document.createElement('div');
        userAvatarBox.style.position = 'absolute';
        userAvatarBox.style.zIndex = BMap.Overlay.getZIndex(this.point.lat);
        userAvatarBox.style.backgroundColor = 'green';
        userAvatarBox.style.border = '1px solid white';
        userAvatarBox.style.width = '50px';
        userAvatarBox.style.height = '50px';
        userAvatarBox.style.borderRadius = '25px 25px 0 0';

        var userAvatar = this.userAvatar = document.createElement('img');
        userAvatar.style.width = '40px';
        userAvatar.style.height = '40px';
        userAvatar.style.margin = '4px';
        userAvatar.style.backgroundColor = 'white';
        userAvatar.style.borderRadius = '20px';
        if (avatar == '') {
            userAvatar.setAttribute('src', 'assets/images/profile-photo.jpg');
        } else {
            userAvatar.setAttribute('src', 'route/file/downloadfile/true/' + avatar);
        }
        userAvatarBox.appendChild(userAvatar);

        var userTitle = this.userTitle = document.createElement('div');
        userTitle.style.position = 'absolute';
        userTitle.style.width = '160px';
        userTitle.style.padding = '2px';
        userTitle.style.borderRadius = '13px';
        userTitle.style.backgroundColor = 'green';
        userTitle.style.color = 'white';
        userTitle.style.border = '1px solid white';
        userTitle.style.textAlign = 'center';
        userTitle.style.top = '48px';
        userTitle.style.left = '-60px';
        userTitle.appendChild(document.createTextNode(this.title));
        userAvatarBox.appendChild(userTitle);

        var arrow = this.arrow = document.createElement("div");
        arrow.setAttribute('class', 'arrow');
        arrow.style.position = 'absolute';
        arrow.style.width = '0';
        arrow.style.height = '0';
        arrow.style.borderWidth = '10px';
        arrow.style.borderStyle = 'solid';
        arrow.style.borderColor = 'green transparent transparent transparent';
        arrow.style.top = '72px';
        arrow.style.left = '14px';
        arrow.style.overflow = 'hidden';
        userAvatarBox.appendChild(arrow);

        map.getPanes().labelPane.appendChild(userAvatarBox);
        return userAvatarBox;
    }

    UserAvatar.prototype.draw = function () {
        var pixel = this.baiduMap.pointToOverlayPixel(this.point);
        this.userAvatarBox.style.left = (pixel.x - 26) + 'px';
        this.userAvatarBox.style.top = (pixel.y - 82) + 'px';
        this.userTitle.innerHTML = this.title;
    }

    UserAvatar.prototype.setPosition = function (point, time) {
        this.point = point;
        this.title = time;
        this.draw();
    }

    return new UserAvatar(map, point, avatar, title);
}