SOURCE

   
var map = new AMap.Map('container', {
  			mapStyle: 'amap://styles/darkblue',
        resizeEnable: true,
        // viewMode:"3D",
        zoom: 13,
        center: [114.68376,37.00490]
    });

    AMap.plugin(["AMap.ControlBar"], function () {
        var bar = new AMap.ControlBar();
        map.addControl(bar);
    });

    /*
     * 添加Canvas图层
     */
    var canvas = document.createElement('canvas');
    canvas.width = canvas.height = 200;

    var context = canvas.getContext('2d')
    context.fillStyle = 'rgb(0,100,255)';
    context.strokeStyle = 'white';
    context.globalAlpha = 1;
    context.lineWidth = 2;

    var radious = 0;
    var draw = function () {
        context.clearRect(0, 0, 200, 200)
        context.globalAlpha = (context.globalAlpha - 0.01 + 1) % 1;
        radious = (radious + 1) % 100;

        context.beginPath();
        context.arc(100, 100, radious, 0, 2 * Math.PI);
        context.fill();
        context.stroke();

        //2D视图时可以省略
        CanvasLayer.reFresh();

        AMap.Util.requestAnimFrame(draw);
    };

    var CanvasLayer = new AMap.CanvasLayer({
        canvas: canvas,
        bounds: new AMap.Bounds(
            [114.72776,37.0190],
            [114.73786,37.0068]
        ),
        zooms: [3, 18],
    });

    CanvasLayer.setMap(map);
    draw();

<script src="https://webapi.amap.com/maps?v=1.4.8&key=您申请的key值"></script>
<div id="container"></div>

 html,
        body,
        #container {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }