首先聲明一些變量蓄髓、地圖對(duì)象以及若干個(gè)點(diǎn)

        // 垃圾車圖標(biāo)的長(zhǎng)和寬
        var carw = 28;
        var carh = 16;
        // 動(dòng)畫(huà)運(yùn)動(dòng)時(shí)間
        var time = 60;
        // 地圖縮放比例
        var zoom = 17;
        // 地圖處理
        var myMap;
        // 坐標(biāo)點(diǎn)
        var geoCoordMap = {
            '大活': [117.0626033810, 39.2452762269],
            '食堂': [117.0592977018, 39.2453218096]
        };

接下來(lái)聲明繪制地圖方法叉庐，同時(shí)在地圖上繪制了若干圖標(biāo),
從下面我們可以看出來(lái)option中是通過(guò)bmap進(jìn)行地圖的繪制的，而其他圖形則通過(guò)series對(duì)象數(shù)組中的圖表對(duì)象進(jìn)行控制的会喝，這里type使用了scatter就是散點(diǎn)圖陡叠，就是在每個(gè)點(diǎn)上去畫(huà)。
因?yàn)樵诘貓D上層繪制圖表肢执，所以zlevel為2枉阵，
symbolSize控制圖形大小，symbol可以使用path://预茄、image://鏈接等兴溜，還沒(méi)有嘗試過(guò)本地圖片好不好使侦厚。
data就按照我的格式去寫就可以在對(duì)應(yīng)的經(jīng)緯度位置繪制圖標(biāo)了。

        function map() {
            // 基于準(zhǔn)備好的dom拙徽，初始化echarts實(shí)例
            myMap = echarts.init(document.getElementById('map'));
            option = {
                bmap: {
                    center: [117.0609231204, 39.2453384287],
                    zoom: zoom,
                    roam: true,
                },
                series: [{
                    name: 'cars', //名字
                    type: 'scatter', //類型為散點(diǎn)型
                    coordinateSystem: 'bmap',
                    zlevel: 2,
                    //設(shè)置標(biāo)簽（也就是這個(gè)點(diǎn)的文本說(shuō)明）
                    label: {
                        normal: { //normal 是圖形在默認(rèn)狀態(tài)下的樣式刨沦；emphasis 是圖形在高亮狀態(tài)下的樣式。
                            show: false
                        }
                    },
                    //散點(diǎn)的尺寸：當(dāng)數(shù)據(jù)加載完成之后執(zhí)行回調(diào)膘怕，通過(guò)返回值來(lái)設(shè)置大小
                    symbolSize: [carw, carh],
                    //設(shè)置點(diǎn)的樣式
                    symbol: "image://http://trash.hebut.top/images/cashcar.png",
                    //設(shè)置數(shù)據(jù)想诅，使用map方法返回一個(gè)新數(shù)組（因?yàn)閐ata不能使用回調(diào)方法），格式：[{name:"廣州",value:[坐標(biāo)x,y,value]},{第二個(gè)點(diǎn)},.....]
                    data: [ {
                        name: "大活a",
                        value: [117.062619907, 39.2455712159]
                    }, {
                        name: "大活b",
                        value: [117.0626038143, 39.2454507276]
                    }, {
                        name: "大活c",
                        value: [117.0626033810, 39.2452762269]
                    }]
                }]
            };

            // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表岛心。
            myMap.setOption(option);

            window.addEventListener("resize", function () {
                myMap.resize();
            });

        }

而繪制動(dòng)畫(huà)也很簡(jiǎn)單来破，只需要在上面的series數(shù)組中添加一項(xiàng)即可，唯一需要注意的就是data的格式

{
    name: '車輛跟蹤', //名字
    type: 'lines',
    coordinateSystem: 'bmap',
    zlevel: 2, //1.設(shè)置的層一樣忘古，則會(huì)使組件或圖表樣式使用同一個(gè)canvas渲染徘禁。2.數(shù)值越大越在上面
    effect: {
        show: true,
        animation: false,
        loop: false,
        period: time,
        symbol: "image://http://trash.hebut.top/images/cashcar@up@left.png",
        symbolSize: [carh, carw] //設(shè)置圖標(biāo)大小
    },
    lineStyle: {
        normal: {
            color: '#46bee9',
                width: 1,
                opacity: 0.0, //線條的透明度
                curveness: 0.0 // 線條曲度
        }
    },
    data: [[
        {
            "name": "大活",
            "coord": [117.062603381, 39.2452762269]
        },
        {
            "name": "食堂",
            "coord": [117.0592977018, 39.2453218096]
        }
    ]]
}