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