other
/
onepage


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
							<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="ECharts">
        <title>ECharts · BMap</title>
        <link href="../../../doc/asset/css/echartsHome.css" rel="stylesheet">
        <style type="text/css">
            body {
                margin: 0;
                padding: 50px;
            }
            pre {
                display: block;
                padding: 9.5px;
                margin: 0 0 10px;
                font-size: 13px;
                line-height: 1.42857143;
                color: #333;
                word-break: break-all;
                word-wrap: break-word;
                background-color: #f5f5f5;
                border: 1px solid #ccc;
                border-radius: 4px;
            }
        </style>
    </head>
    <body>
        <h3>简介</h3>
        <p>BMapExt是在Echarts基础上使用百度地图API进行地图绘制，使用的时候除了需要Echarts的相关知识外，还需要对百度地图API(<a target='_blank' href='http://developer.baidu.com/map/index.php?title=jspopular'>官网</a>)有所了解</p>
        <h3>实例方法</h3>
        <table cellspacing="0" class="ADoc_table full">
            <tr>
                <th> 名称 </th>
                <th> 参数 </th>
                <th> 描述 </th>
            </tr>
            <tr>
                <td> <b>{HTMLElement}</b> getEchartsContainer </td>
                <td> 无 </td>
                <td> 获取扩展为Echarts生成的容器 </td>
            </tr>
            <tr>
                <td> <b>{BMap.Map} </b> getMap </td>
                <td> 无 </td>
                <td> 获取扩展使用的百度地图实例 </td>
            </tr>
            <tr>
                <td> <b>{ECharts}</b> initECharts </td>
                <td> 参数同Echarts实例的init </td>
                <td> 初始化echarts实例，参数完全使用<a target="_blank" href="../../../doc/doc.html#初始化" >ECharts实例的init()</a>， 返回扩展使用的Echarts实例 </td>
            </tr>
            <tr>
                <td> <b>{ECharts}</b> getECharts </td>
                <td> 无 </td>
                <td> 获取扩展使用的Echarts实例 </td>
            </tr>
            <tr>
                <td> setOption </td>
                <td>  参数同Echarts实例的setOption
                </td>
                <td>此方法会讲option中的series中的markPoint、markLine的坐标重新计算为与百度地图匹配的坐标，<a target="_blank" href="../../../doc/doc.html#实例方法">Echarts的实例方法</a></td>
            </tr>
            <tr>
                <td> refresh </td>
                <td> 无 </td>
                <td> 页面刷新 </td>
            </tr>
            <tr>
                <td> <b>{Array.&lt;number&gt;}</b> getMapOffset </td>
                <td> 无 </td>
                <td> 获取扩展当前的地图偏移量 </td>
            </tr>
            <tr>
                <td> <b>{Array.&lt;number&gt;}</b> geoCoord2Pixel </td>
                <td> <b>{Array.&lt;number&gt;}</b> geoCoord </td>
                <td> 经纬度坐标转换为像素坐标 </td>
            </tr>
            <tr>
                <td> <b>{Array.&lt;number&gt;}</b> pixel2GeoCoord </td>
                <td> <b>{Array.&lt;number&gt;}</b> pixel </td>
                <td> 像素坐标转换成经纬度坐标 </td>
            </tr>
        </table>

        <h3>如何使用</h3>
        <p>1、引用Echarts、扩展、百度地图API</p>
        <p>2、实例化扩展，传人容器、百度地图API的变量、echarts</p>
        <p>3、获取扩展中使用的百度地图实例，进行地图操作</p>
        <p>4、获取扩展生成Echarts容器</p>
        <p>5、使用扩展初始化Echarts（initECharts），操作（setOption）</p>
        <div class="code">
                        <pre>
        // 在这之前必须加装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);

                        </pre>
                    </div>
    </body>
</html>