百度地图和echarts结合实例

1.由echart对象(bmapChart)获取百度地图对象(bdMap),echart对象(bmapChart)适用于全部的echart的操做和接口,百度地图对象(bdMap)适用于百度地图的全部接口和操做 数组

init: function () { var cityname = "寿光市"; var bdMap; var blist = []; var districtLoading = 0; var bmapChart = echarts.init(document.getElementById('echarts-map-chart')); //echart 对象 var mapOption = GetOption(cityname, cityname); bmapChart.setOption(mapOption); var ecModel = bmapChart._model; ecModel.eachComponent('bmap', function (bmapModel) { if (bdMap == null) {  bdMap = bmapModel.__bmap;//由echart实例获取百度地图的实例
 } }); bdMap.disableDoubleClickZoom();//禁止双击缩放
 addDistrict(cityname); function convertData(name) { var res = []; for (var i = 0; i < bdhousedata.length; i++) { var dataItem = bdhousedata[i]; if (dataItem.value[3] == name) { res.push(dataItem); } } return res; } function GetOption(na, city) { var geoitemstyle = { normal: { areaColor: '#031525', borderColor: '#3B5077', }, emphasis: { areaColor: '#00CDCD', } }; var opt = { bmap: { center: [118.82, 37.05],// 中心位置坐标
                                zoom: 11, show: true, map: na, label: { normal: { show: true, color: '#FFC125', fontSize: 13.9, }, emphasis: { color: '#FFC125', fontSize: 13.9, show: true, } }, right: 300, roam: true, }, backgroundColor: '#286895', series: [ ], } return opt; } function addDistrict(districtName) { //使用计数器来控制加载过程
                        districtLoading++; var bdary = new BMap.Boundary(); bdary.get(districtName, function (rs) {       //获取行政区域
                            var count = rs.boundaries.length; //行政区域的点有多少个
                            if (count === 0) { alert('未能获取当前输入行政区域'); return; } for (var i = 0; i < count; i++) { blist.push({ points: rs.boundaries[i], name: districtName }); }; //加载完成区域点后计数器-1
                            districtLoading--; if (districtLoading == 0) { //全加载完成后画端点
 drawBoundary(); } }); } function drawBoundary() { //包含全部区域的点数组
                        var pointArray = []; var pNW = { lat: 59.0, lng: 73.0 } var pNE = { lat: 59.0, lng: 136.0 } var pSE = { lat: 3.0, lng: 136.0 } var pSW = { lat: 3.0, lng: 73.0 } //向数组中添加一次闭合多边形,并将西北角再加一次做为以后画闭合区域的起点
                        var pArray = []; pArray.push(pNW); pArray.push(pSW); pArray.push(pSE); pArray.push(pNE); pArray.push(pNW); //循环添加各闭合区域
                        for (var i = 0; i < blist.length; i++) { //添加多边形层并显示
                            var ply = new BMap.Polygon(blist[i].points, { strokeWeight: 3, strokeColor: "#EEAD0E", fillOpacity: 0.01, fillColor: " #ffffff", enableClicking: true }); //创建多边形覆盖物
                            ply.name = blist[i].name; bdMap.addOverlay(ply); //将点增长到视野范围内
                            var path = ply.getPath(); pointArray = pointArray.concat(path); //将闭合区域加到遮蔽层上,每次添加完后要再加一次西北角做为下次添加的起点和最后一次的终点
                            pArray = pArray.concat(path); pArray.push(pArray[0]); } //添加遮蔽层
                        var plyall = new BMap.Polygon(pArray, { strokeOpacity: 0.0000001, strokeColor: "#000000", strokeWeight: 0.00001, fillColor: "#05102C", fillOpacity: 1 }); //创建多边形覆盖物
 bdMap.addOverlay(plyall); } }