简介

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.<number>} getMapOffset 获取扩展当前的地图偏移量
{Array.<number>} geoCoord2Pixel {Array.<number>} geoCoord 经纬度坐标转换为像素坐标
{Array.<number>} pixel2GeoCoord {Array.<number>} 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);