EChart系列：在echart3中使用百度地图扩展之后，如何获取到百度地图对象

最近做项目想要在百度地图上叠加显示echart的散点图，然后根据地图的缩放等级和区域范围要显示不同的散点图，这中间折腾了好久。功能要求包括：

（1）底图使用百度地图；

（2）可以在地图上叠加显示echart的散点图；

（3）鼠标移动到散点图上面之后，可以浮动显示相关信息；

（4）能够获取当前显示区域地图的经纬度范围；

（5）能够响应地图的拖拽和缩放事件；

这里有两种选择：

1. 使用echart2的百度地图扩展，1， 3， 4， 5 都可以满足，就是2满足不了，他的一个series的所有图标样式都是一样的，大小也一样；

2. 使用echart3的百度地图扩展，可以满足1,2,3， 4 和5满足不了，因为获取不到百度地图对象；

在初步查看了echart2和echart3的源码之后，感觉还是使用echart3比较可能快速实现，毕竟echart3的bmap扩展代码有限，我们只要想办法从这个扩展中获取到百度地图对象，后续一切都好办了。

反复阅读echart3源码（参考https://github.com/ecomfe/echarts 的3.1.6版本）目录下的 extension\bmap文件夹内的bmap.js, BMapCoordSys.js, BMapModel.js, BMapModel.js，发现BMapCoordSys.js内的BMapCoordSys.create内通过bmapModel可以获取到bmap对象，而bmapModel是通过ecModel的eachComponent方法来传入的，通过查看调用堆栈，发现ecModel其实就是EChart的_model对象。

所以找到如下获取bmap对象的方法

var ecModel = myChart._model;
var bmap = null;
ecModel.eachComponent(‘bmap‘, function (bmapModel) {			
	if(bmap == null){
		 bmap = bmapModel.__bmap;
	}
});

找到bmap对象之后，就可以去使用bmap的各种api，响应他的各种事件了(http://developer.baidu.com/map/reference/index.php  )，比如：

var pt = bmap.pixelToPoint({
	x: 800,
	y: 500
});

var pix = bmap.pointToPixel({
	lng: 114.31,
	lat: 30.52
});

alert(‘lng:‘ + pt.lng + ‘, lag: ‘ + pt.lat);
alert(‘武汉的坐标： x:‘ + pix.x + ‘, y: ‘ + pix.y);
bmap.addEventListener("dragend",function(){
	alert(‘缩放等级:‘ + bmap.getZoom());
});

bmap.addEventListener("moveend",function(){
	alert(‘缩放等级:‘ + bmap.getZoom());
});

来自为知笔记(Wiz)