echarts2和百度地图的简单应用

前段时间简单的学习了echarts和百度地图，并把它们组合起来，做了一个点击地图把json里对应省份的数据输出，然后点击查看地图时会把数据的地址标注在百度地图上，现在和大家分享一下我学习的心得。
一、echarts
ECharts是一个高度个性化定制的数据可视化图表的纯 Javascript 图表库，它兼容主流的浏览器，对于制作可视化的数据图表是一个好的帮手。ECharts的最新版本ECharts3.0版本，对于刚开始接触它的人来说，感觉不太容易上手,而且地图的数据感觉有点出入。所以，我就选择ECharts2.0来练练手，每当我们接触一个东西，其实让我们更加容易认识它的就是通过它的文档，文档会详细说明它的特性和功能，现在奉上echarts文档
首先要点引入文件：

<script src="js/echarts-all.js"></script>

其次要有一个Dom节点来存放echarts

<div id="echart" class="echart"></div>

然后就是简单的配置：

var myChart = echarts.init(document.getElementById('echart'));
var option = {
                tooltip : {
                    trigger: 'item',
                    formatter: '{b}'
                },
                series : [
                    {
                        name: '中国',
                        type: 'map',
                        mapType: 'china',
                        selectedMode : 'single',
                        itemStyle:{
                            normal:{label:{show:true}},
                            emphasis:{label:{show:true}}
                        },
                        data:[
                            {name:'广东',selected:true} 
                        ]
                    }
                ]
            };
         myChart.setOption(option);

以上就可以生成一个中国的地图了。

二、数据
模拟后台的数据，写在data.js里面，通过require过来，数据的格式：

{
    "id":"1",
    "pro":"广西",
    "info":{
        "city":"南宁",
        "data":{
            "name":"南宁东葛路锦华华为授权体验店",
            "phone":"0771-2636869",
            "addr":"南宁东葛路锦华华为授权体验店"
        }
    }
}
.
.
.

三、百度地图
百度地图的接口文档有详细的说明，在这里我只简单略过一下，不明白的可以直接去看文档百度地图API
用到百度地图，首先你要先申请一个地图的key，具体不做说明，然后引入：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yourkey"></script>

创建地图，并标注一个点：

var map = new BMap.Map("baiduMap");     /* 创建map实例 */
var point = new BMap.Point(113.381958,23.10755);
map.centerAndZoom(point,17);
map.addOverlay(point );
map.clearOverlays();
var bMapNavigation = new BMap.NavigationControl();  /*创建地图平移缩放控件*/
map.addControl( bMapNavigation );               /* 添加一条鱼骨*/
var bMapScale = new BMap.ScaleControl();  /*创建地图比例尺控件*/
map.addControl( bMapScale );          /* 添加比例尺*/
map.enableScrollWheelZoom();   // 启动鼠标滚轮操作
map.enableContinuousZoom();    // 开启连续缩放效果
map.enableInertialDragging();　// 开启惯性拖拽效果
map.enableKeyboard();          // 开启键盘操作

在项目里我创建一个地址解析器，把地址解析并标注到地图上

通过选择的省份搜索数据

具体效果如图：

点击查看地图的效果图：

以上就是这个小项目的全部功能，主要是对全国各个省份网点的查询并在地图上标注出来，对不同的点在地图上重新渲染一遍，具体的代码已上传到我的githus上。