百度地图自定义控件（涉及画多边形，坐标统计，坐标聚合和自定义地图控件）

先图为敬！

画多边形，坐标聚合和范围统计，网上和百度官网已有不少例子，这里不再介绍，着重说一下自定义地图控件。

控件使用方法：用户点击左上角多边形图标后，即可在地图画多边形圈地。当第一个图画完之后，控件随即显示所画区域的名称和统计的结果（你不用管是什么计算），最多可画五块地。选好地后，点击复选框进行统计显示结果。（配合eacharts显示，效果会更直观）最后，关闭控件，圈地也从地图清除，地图还原，再画地控件会重新显示。

前端代码：

//多边形样式
var styleOptions = {
    strokeColor:"red",    //边线颜色。
    fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
    strokeWeight: 1,       //边线的宽度，以像素为单位。
    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_LEFT, //位置
        offset: new BMap.Size(40, 5), //偏离值
        drawingModes:drawing,//BMAP_DRAWING_RECTANGLE-矩形BMAP_DRAWING_MARKER 画点BMAP_DRAWING_CIRCLE 画圆 BMAP_DRAWING_POLYLINE 画线
        scale:0.8
    },
    //circleOptions: styleOptions, //圆的样式
    //polylineOptions: styleOptions, //线的样式
    polygonOptions: styleOptions, //多边形的样式
    //rectangleOptions: styleOptions //矩形的样式
});

var overlaycomplete = function(e){
    var ploy=e.overlay;
    if(reckon>5){
        alert('手选区域最多五个！');
        ploy.remove();
        return;
    }
    var path=ploy.getPath();
    var cenpoint = getCenterPoint(path);

    //获得中心点
    var label=new BMap.Label('手选区域'+reckon, {offset:new BMap.Size(-40,-25), position:cenpoint});
    label.setStyle({
        color : "#000",
        fontSize : "12px",
        backgroundColor :"0.05",
        border :"0",
        fontWeight :"bold"
    });
    labels.push(label);
    map.addOverlay(label);
    ploys.push(ploy);
    var list=[];
    var arr_num=[];
    var points=$('#allpoints').data('allpoints');
    var polypoints=[];//多边形内的点
    $.each(points,function (k,v) {
        var arr=v.split(',');
        var point=new BMap.Point(arr[0],arr[1]);
        //判断marker是否在多边形内
        if(BMapLib.GeoUtils.isPointInPolygon(point, e.overlay)){
            polypoints.push(arr[2]);
        }
    });
    var polycount=count_list(polypoints);
    var per=$('#allpers').data('allpers');
    //统计比重
    var percent=0;
    $.each(polycount,function (k,v) {
        var arr=v.split('=>');
        percent+=per[arr[0]]*arr[1];
    });
    ploypercents.push((percent*100).toFixed(2));
    if(myZoomCtrl){
        map.removeControl(myZoomCtrl);
    }
    ZoomControl.prototype = new BMap.Control(); // 通过JavaScript的prototype属性继承于BMap.Control
    // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
    // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
    ZoomControl.prototype.initialize = function(map){
        // 创建一个DOM元素
        var div = document.createElement("div");
        // 添加文字说明
        //div.appendChild(document.createTextNode("图标"));
        // 设置样式
        div.style.width="240PX";
        div.style.height="400px";
        div.style.margin="40px 0px";
        div.style.background="#d0d0d0";
        div.id="map_div";
        var div_top = document.createElement("div");
        div_top.style.height="40px";
        div_top.style.width="100%";
        div_top.style.borderBottom="1px dotted #fff";
        var div_main = document.createElement("div");//列表区域
        div_main.style.height="360px";
        div_main.style.width="100%";
        div_main.id="div_main";

        var check = document.createElement("input");//添加checkbox
        check.setAttribute("type","checkbox");
        check.setAttribute("value","all");