最近做项目想要在百度地图上叠加显示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源码（参考  的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对象的方法

1. var ecModel = myChart._model;
2. var bmap = null;
3. ecModel.eachComponent('bmap', function (bmapModel) {
4. if(bmap == null){
5. bmap = bmapModel.__bmap;
6. }
7. });

找到bmap对象之后，就可以去使用bmap的各种api，响应他的各种事件了(   )，比如：

1. var pt = bmap.pixelToPoint({
2. x: 800,
3. y: 500
4. });
6. var pix = bmap.pointToPixel({
7. lng: 114.31,
8. lat: 30.52
9. });
11. alert('lng:' + pt.lng + ', lag: ' + pt.lat);
12. alert('武汉的坐标： x:' + pix.x + ', y: ' + pix.y);
13. bmap.addEventListener("dragend",function(){
14. alert('缩放等级:' + bmap.getZoom());
15. });
17. bmap.addEventListener("moveend",function(){
18. alert('缩放等级:' + bmap.getZoom());
19. });