百度地图和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);
                    }

                }