百度地图叠加饼图_百度地图环饼图

在项目开发中,遇到了这样一个需求:在百度地图中可以显示饼图
在网上搜了比较久，都没有搜到仔细的答案，在查询一些API文档后自己笼统的做了一个.
首先我们需要在地图上要有一个 可识别到的div， 该div需要有个id给我们引用来作图，就是这么简单。

那么我们可以自定义覆盖物,让覆盖物作为一个div并赋予id，就有一个容器用来作图了。。

var pieChar = null;
/**
 * 百度地图对象
 */
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.3964,39.9093), 15);	
map.addControl(new BMap.NavigationControl());    
map.addControl(new BMap.ScaleControl());  
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
var divNumber = 1;
 
 
// 自定义覆盖物,point为添加覆盖物的点位置
function ComplexCustomOverlay(point){
    this._point = point;
 }
ComplexCustomOverlay.prototype = new BMap.Overlay();
 
 
ComplexCustomOverlay.prototype.initialize = function(map){
    this._map = map;
    //生成div
    var div = this._div = document.createElement("div"); 
   //赋id
    div.id = 'div'+divNumber;
    divNumber++;
    div.style.backgroundColor = "#EE5D5B";
    div.style.border = "1px solid #BC3B3A";
    div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
    div.style.width = "50px";
    div.style.height = "50px";
    //将该覆盖物添加到标签覆盖物列表
    map.getPanes().labelPane.appendChild(div);
//下面是饼图的生成代码,每个人作图的方法都不同,这里就不详细叙述了
    pieChar = new PieChar({
    	//title: '会员购买生命周期分布',
    	id: div.id
    	});
   .....
   .....
   .....
   .....
    return div;
}
ComplexCustomOverlay.prototype.draw = function(){
    var map = this._map;
//饼图的位置设置,需要获取该地图点的像素位置x,y
    var pixel = map.pointToOverlayPixel(this._point);
    this._div.style.left = pixel.x +"px";
    this._div.style.top  = pixel.y - 30 + "px";
  }
var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(116.407845,39.914101));
var myCompOverlay2 = new ComplexCustomOverlay(new BMap.Point(116.407845,39.914110));
map.addOverlay(myCompOverlay);
map.addOverlay(myCompOverlay2);