百度地图上叠加echarts图表

项目需要在百度地图上实现类似饼状图的标注，看了一下目前百度地图结合好像只支持点、线以及热力图

这是要实现的效果

//为每个echarts设置不同的ID
var divId = 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'+divId;
divId++;
//
div.style.backgroundColor = "#fff";
//
div.style.border = "1px solid #BC3B3A";
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
div.style.width = "100px";
div.style.height = "100px";
//这里必须是绝对定位，不然会影响经纬度定位，然中偏离原来位置
div.style.position='absolute';
//将该覆盖物添加到标签覆盖物列表
map.getPanes().labelPane.appendChild(div);
//echarts图表配置，下面只是一个示例，可以配置各种图表
var echarts2=echarts.init(document.getElementById(div.id))
var option = {
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series : [
{
name: '呵呵',
type: 'pie',
radius : ['50%', '70%'],
//
center: ['50%', '70%'],
data:[
{value:335, name:'吃'},
{value:110, name:'喝'},
{value:210, name:'玩'},
{value:410, name:'乐'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
echarts2.setOption(option)
var divText=this._divText=document.createElement("div");
divText.className = "divText";
$(divText).html("<span>"+213+"<br>"+12312+"</span>")
div.appendChild(divText)
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(104.116583,30.839504));
map.addOverlay(myCompOverlay);

 该方法通过百度地图自定义标注创建容器，在容器内放置各种图表，类似在容器内可以防止任何内容。但可能会有性能问题，具体没有测试，只是实现了功能。

最后

以上就是端庄书包为你收集整理的百度地图上叠加echarts图表的全部内容，希望文章能够帮你解决百度地图上叠加echarts图表所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。