百度地图bmap + echarts的结合以及运用

百度地图bmap + echarts的结合以及运用

最近在学习echarts时，在官方用例中看到echarts结合百度地图的官方用例，查阅之后分享一下我最近的经验所得。其中我在他处找到了相关示例：

首先引入相关文件：

文件引入后,在相关echarts文件中配置相关option：

var len = data.rows.length    //  data.rows是后台返回站点的数组
var mapChart = echarts.init(document.getElementById('myChart'));   //  初始化echarts
// 将得到的数据转换成需要的二维数组的形式
var array = [];
for (var i=0;i<len;i++) {var arr0 = [];
arr0.push(data.rows[i].longitude,data.rows[i].latitude,data.rows[i].orgName,data.rows[i].place,data.rows[i].orgId);array.push(arr0);
}
//  最终 array 的形式：[[120.3, 30.2, '第一个站点',  1],[100.3, 50.2, '第二个站点',  2]...]
mapChart.setOption({    //  地图相关配置项bmap: {center: [121.060838, 31.11664],    //  中心点zoom: 12,          //  放大倍数roam: true,},title: {      //  标题样式x: "center",subtextStyle: {color: '#00F6FF',fontSize: 15,textShadowColor: "#64FAFF",textShadowBlur: 5,textShadowOffsetX: 0,textShadowOffsetY: 0,},},tooltip: {   //  每个站点的显示信息trigger: 'item',formatter: function (params) {   //  params是数组array里每个项return "所属区域：" + params.value[2] + "<br/>地点：" + params.value[3] + "<br>经度：" + params.value[1] + "<br/>纬度：" + params.value[0] + "<br/>"}},series: [{type: 'scatter',coordinateSystem: 'bmap',symbol: "circle",      // 标识点的样式symbolSize: "16",     // 标识点的大小color: "#0031C4",     // 标识点的颜色data: array,     // 标识点的数组array}]
});
// 点击每个站点可以进行相关操作
mapChart.on("click",function (e) {console.log(e)    //  每个标识点的信息
})
var bmap = mapChart.getModel().getComponent('bmap').getBMap();    // 通过echarts实例获取地图实例的方法
bmap.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP]}));    //  看这里 http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference_3_0.html#a2b15
// bmap.setMapStyle({style: 'midnight'});  //  地图样式 
// http://lbsyun.baidu.com/index.php?title=jspopular/guide/custom    官网v2.0
// http://lbsyun.baidu.com/custom/list.htm     官网v2.0
//默认地图样式(normal)
//清新蓝风格(light)
//黑夜风格(dark)
//清新蓝绿风格(bluish)
//高端灰风格(grayscale)
//强边界风格(hardedge)
//青春绿风格(darkgreen)
//浪漫粉风格(pink)
//午夜蓝风格(midnight)
//自然绿风格(grassgreen)
//精简风格(googlelite)
//红色警戒风格(redalert)//  上面这些模板样式如果无法满足需求，可以自己编辑个性化样式   http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/custom$(window).resize(function () {   // 视图大小自适应mapChart.resize();
})

至此bmap+echarts的结合就到这就初步完成了。