百度地图轨迹动画
    轨迹动画 - 图1

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5.   <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    6.   <style type="text/css">
    7.     body,
    8.     html,
    9.     #allmap {
    10.       width: 100%;
    11.       height: 100%;
    12.       overflow: hidden;
    13.       margin: 0;
    14.       font-family: "微软雅黑";
    15.     }
    17.     #allmap {
    18.       position: relative;
    19.     }
    21.     #tools {
    22.       position: absolute;
    23.       left: 0;
    24.       top: 0;
    25.       z-index: 1000;
    26.     }
    28.   </style>
    29.   <script type="text/javascript"
    30.           src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"></script>
    31.   <script type="text/javascript"
    32.           src="https://api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js"></script>
    33.   <title>地图展示</title>
    34. </head>
    36. <body>
    37.   <div id="allmap"></div>
    38.   <div id="tools">
    39.     <button id="start">播放动画</button>
    40.     <button id="end">停止播放</button>
    41.   </div>
    42. </body>
    44. </html>
    45. <script type="text/javascript">
    46.   var bmap = new BMapGL.Map("allmap");                          // 创建Map实例
    47.   bmap.centerAndZoom(new BMapGL.Point(116.297611, 40.047363), 17);    // 初始化地图，设置中心点坐标和地图级别
    48.   bmap.enableScrollWheelZoom(true);                             // 开启鼠标滚轮缩放
    49.   var path = [{
    50.     'lng': 116.297611,
    51.     'lat': 40.047363
    52.   }, {
    53.     'lng': 116.302839,
    54.     'lat': 40.048219
    55.   }, {
    56.     'lng': 116.308301,
    57.     'lat': 40.050566
    58.   }, {
    59.     'lng': 116.305732,
    60.     'lat': 40.054957
    61.   }, {
    62.     'lng': 116.304754,
    63.     'lat': 40.057953
    64.   }, {
    65.     'lng': 116.306487,
    66.     'lat': 40.058312
    67.   }, {
    68.     'lng': 116.307223,
    69.     'lat': 40.056379
    70.   }];
    71.   var point = [];
    72.   for (var i = 0;i < path.length;i++) {
    73.     point.push(new BMapGL.Point(path[i].lng, path[i].lat));
    74.   }
    75.   var pl = new BMapGL.Polyline(point);
    76.   var trackAni = new BMapGLLib.TrackAnimation(bmap, pl, {
    77.     overallView: true, // 动画完成后自动调整视野到总览
    78.     tilt: 30,          // 轨迹播放的角度，默认为55
    79.     duration: 20000,   // 动画持续时长，默认为10000，单位ms
    80.     delay: 3000        // 动画开始的延迟，默认0，单位ms
    81.   });
    82.   document.getElementById('start').addEventListener('click', function () {
    83.     trackAni.start();
    84.   });
    85.   document.getElementById('end').addEventListener('click', function () {
    86.     trackAni.cancel();         // 强制停止动画
    87.   });
    88. </script>

    http://www.youbaobao.xyz/datav-docs/guide/guide/bmap-harder.html#%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE%E8%BD%A8%E8%BF%B9%E5%8A%A8%E7%94%BB