Echarts中BMapAPI地图绘制功能(BMapExt)的实现步骤
文章转载于:http://echarts.baidu.com/extension/BMap/doc/doc.html
简介
BMapExt是在Echarts基础上使用百度地图API进行地图绘制,使用的时候除了需要Echarts的相关知识外,还需要对百度地图API(官网)有所了解
实例方法
名称 | 参数 | 描述 |
---|---|---|
{HTMLElement}getEchartsContainer | 无 | 获取扩展为Echarts生成的容器 |
{BMap.Map} | 无 | 获取扩展使用的百度地图实例 |
{ECharts} | 参数同Echarts实例的init | 初始化echarts实例,参数完全使用ECharts实例的init(),返回扩展使用的Echarts实例 |
{ECharts} | 无 | 获取扩展使用的Echarts实例 |
setOption | 参数同Echarts实例的setOption | 此方法会讲option中的series中的markPoint、markLine的坐标重新计算为与百度地图匹配的坐标,Echarts的实例方法 |
refresh | 无 | 页面刷新 |
{Array.} | 无 | 获取扩展当前的地图偏移量 |
{Array.} | {Array.}geoCoord | 经纬度坐标转换为像素坐标 |
{Array.}pixel2GeoCoord | {Array.} | 像素坐标转换成经纬度坐标 |
如何使用
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);