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

                }