123 lines
4.9 KiB
HTML
123 lines
4.9 KiB
HTML
<!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.<number>}</b> getMapOffset </td>
|
||
<td> 无 </td>
|
||
<td> 获取扩展当前的地图偏移量 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array.<number>}</b> geoCoord2Pixel </td>
|
||
<td> <b>{Array.<number>}</b> geoCoord </td>
|
||
<td> 经纬度坐标转换为像素坐标 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array.<number>}</b> pixel2GeoCoord </td>
|
||
<td> <b>{Array.<number>}</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> |