Echarts结合百度地图API绘制热力图

最近项目中需要使用echarts与百度地图API结合来绘制事故发生热力图，在将其与百度地图结合的过程中遇到了一些问题，现将其过程与解决方案记录下，以供日后参考。echarts中结合百度地图API的热力图demo：http://gallery.echartsjs.com/editor.html?c=xSJNKs7EX

使用步骤

1.引用echarts与百度地图扩展js文件

<!--引入百度地图的jssdk，这里需要使用你在百度地图开发者平台申请的 ak-->
<script src="http://api.map.baidu.com/api?v=2.0&ak="></script>
<!-- 引入 ECharts -->
<script src="dist/echarts.min.js"></script>
<!-- 引入百度地图扩展 -->
<script src="dist/extension/bmap.min.js"></script>

其实有个简单的方法直接在下载demo中的HTML页面即可，会以http形式引入相关文件，直接拿来用就好。

2.获取dom以及echarts初始化

需要获取放置地图div的dom元素，然后将echarts初始化，假如有多个js功能文件都要用到绘图的，这部分最后在主页面HTML中进行，相关代码如下：

var dom = document.getElementById("map");
var myChart = echarts.init(dom);

3.设置option绘制图形

使用echarts画图都需要定义好option配置项，然后调用函数进行设置，这部分最好单独放入一个函数中，方便后续其他需要绘图的调用，相关代码如下：

 function drawHeatMap(points) {//      var dom = document.getElementById("contentD");
//      var myChart = echarts.init(dom);
//      var app = {};option = null;
//      app.title = '热力图与百度地图扩展';myChart.setOption(option = {animation: false,bmap: {center: [117.282699092,31.8669422607],zoom: 12,roam: true},visualMap: {show: false,top: 'top',min: 0,max: 100,seriesIndex: 0,calculable: true,inRange: {color: ['blue', 'blue', 'green', 'yellow', 'red']}},series: [{type: 'heatmap',coordinateSystem: 'bmap',data: points,pointSize: 5,blurSize: 6}]});
//          if (!app.inNode) {//              // 添加百度地图插件
//              var map = myChart.getModel().getComponent('bmap').getBMap();
//              map.addControl(new BMap.MapTypeControl());
//          }if (option && typeof option === "object") {myChart.setOption(option, true);}}

4.获取百度地图扩展

最后需要获取地图对象，以便后续调用百度地图API，相关代码如下：

var map = myChart.getModel().getComponent('bmap').getBMap();
map.addControl(new BMap.MapTypeControl());
map.centerAndZoom("合肥",12);
map.enableScrollWheelZoom(true);

注意后续如果需要使用百度地图API中的函数画图，需要每次先调用上述代码第一行获取map对象，否则无法绘制。

5.最终结果

总结与感想

（1）项目中使用的是ajax获取数据，由于Ajax是异步的，所以需要把绘图的函数放入ajax的回调函数中，不然可能在还没获取完数据时，就已经执行了绘图代码。

（2）注意引入js文件的顺序，第一次画不出来就是因为没有把百度地图ak的sj文件放到echarts前面

（3）学会发现问题，定位问题以及解决问题。其实很多代码有bug没有想象中的那复杂，很多时候主体思路和框架都对了，就是一两行细节的问题，这时就需要反复利用调式手段，不断尝试，发现问题所在，不然前面可能都功亏一篑了。

参考：https://github.com/apache/incubator-echarts/tree/master/extension/bmap

http://gallery.echartsjs.com/editor.html?c=xSJNKs7EX