Echarts中BMapAPI地图绘制功能（BMapExt）的实现步骤

Echarts中BMapAPI地图绘制功能（BMapExt）的实现步骤

文章转载于：http://echarts.baidu.com/extension/BMap/doc/doc.html

简介

BMapExt是在Echarts基础上使用百度地图API进行地图绘制，使用的时候除了需要Echarts的相关知识外，还需要对百度地图API(官网)有所了解

实例方法

名称参数描述{HTMLElement}getEchartsContainer无获取扩展为Echarts生成的容器{BMap.Map} getMap无获取扩展使用的百度地图实例{ECharts} initECharts参数同Echarts实例的init初始化echarts实例，参数完全使用ECharts实例的init()，返回扩展使用的Echarts实例{ECharts} getECharts无获取扩展使用的Echarts实例setOption参数同Echarts实例的setOption此方法会讲option中的series中的markPoint、markLine的坐标重新计算为与百度地图匹配的坐标，Echarts的实例方法refresh无页面刷新{Array.} getMapOffset无获取扩展当前的地图偏移量{Array.} geoCoord2Pixel{Array.}geoCoord经纬度坐标转换为像素坐标{Array.}pixel2GeoCoord{Array.} pixel像素坐标转换成经纬度坐标

如何使用

1、引用Echarts、扩展、百度地图API

2、实例化扩展，传人容器、百度地图API的变量、echarts

3、获取扩展中使用的百度地图实例，进行地图操作

4、获取扩展生成Echarts容器

5、使用扩展初始化Echarts（initECharts），操作（setOption）

        // 在这之前必须加装ECharts、百度地图API文件、引用扩展文件        var myBMapExt = new BMapExt($('#main')[0], BMap, echarts);        // 获取地图实例        var map = myBMapExt.getMap();        // 以下是地图的操作，详细api请前往百度地图API官网        var startPoint = {            x: 104.114129,            y: 37.550339        };        var point = new BMap.Point(startPoint.x, startPoint.y);        map.centerAndZoom(point, 5);        map.enableScrollWheelZoom(true);        // ....        // 配置option        var option = {...}        // 获取echarts的dom容器        var container = BMapExt.getEchartsContainer();        // 通过initEcharts初始化echarts并获取实例        var myChart = BMapExt.initECharts(container);        // 设置option        BMapExt.setOption(option);