text: 
  <!doctype html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
      <title>pynovice_map</title>
      <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
      <script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
      <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=d0b0f942970a97389a81d82e505642bf&&plugin=AMap.Scale,AMap.OverView,AMap.ToolBar,ElasticMarker"></script>
      <style>
          html, body, #container {
              height: 100%;
              width: 100%;
          }
      </style>
  </head>
  
  <body>
      <div id="container"></div>
      <div class="info" id="location_text">
          鼠标点击位置：[lng_mars,lat_mars]
      </div>
      <div class="input-card">
          <style>
              body
              .input-card .btn{
                  margin-right: 0.7rem;
                  width: 6rem;
              }
              .input-card .btn:last-child{
                  margin-right: 0;
              }
          </style>
          <h4>轨迹回放控制</h4>
          <div class="input-item">
              速度： <input type="text" value=200 id="speed">&nbsp;&nbsp;
              行程： <input type="text" value=[0,1] id="stroke">
          </div>
          <div class="input-item">
              <input type="submit" class="btn" value="开始动画" id="resume" onclick="startAnimation()"/>
              <input type="button" class="btn" value="停止动画" id="stroke" onclick="pauseAnimation()"/>
              <input type="submit" class="btn" value="继续动画" id="resume" onclick="resumeAnimation()"/>
          </div>
      </div>
  
      //data
      <script>
          var lineArr = [[116.478935, 39.997761, "2020-10-02 00:02:38\uff1a\u901f\u5ea646km/h"], [116.478939, 39.997825], [116.478912, 39.998549], [116.478912, 39.998549], [116.478998, 39.998555], [116.478998, 39.998555], [116.479282, 39.99856], [116.479658, 39.998528, "fdafasfdasfasf"], [116.480151, 39.998453], [116.480784, 39.998302], [116.480784, 39.998302], [116.481149, 39.998184], [116.481573, 39.997997], [116.481863, 39.997846], [116.482072, 39.997718], [116.482362, 39.997718, "fdafasfdasfasf"], [116.483633, 39.998935, "fdafasfdasfasf"], [116.48367, 39.998968, "fdafasfdasfasf"], [116.484648, 39.999861, "2020-10-02 00:02:38\uff1a\u901f\u5ea646km/h"]];
          var tripList = [3, 5, 10, 15];
          var markerSet = [{"data":[],"img":"https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png"}];
          var showMarker = true;
          // extends
          var massArr = lineArr.concat([]);
          if(showMarker==true){
              var tripArr = getTripArr(tripList);
          };
          function getTripArr(tripList){
              var _data=[];
              for (i=0;i<tripList.length;i++){
                  _data[i]=lineArr[tripList[i]];
              }
              return _data
          };
      </script>
  
      // main_container
      <script>
          var map = new AMap.Map("container", {
              resizeEnable: true,
              center: lineArr.concat(markerSet[0].data)[0].slice(0.2),
              zoom: 17
          });
  
          var scale = new AMap.Scale({
              visible: true
          });
          var toolBar = new AMap.ToolBar({
              visible: true
          });
          var overView = new AMap.OverView({
              visible: true
          });
          map.addControl(scale);
          map.addControl(toolBar);
          map.addControl(overView);
  
          function showInfoClick(e){
              var text = '鼠标点击位置：[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]'
              document.querySelector("#location_text").innerText = text;
          }
          map.on('click', showInfoClick);
  
          document.getElementById("stroke").value='['+[0,tripList.length+1].toString( )+']';
      </script>
  
      // trip_marker
      <script>
          var zoomStyleMapping1 = { 3:0,4:0,5:0,6:0,7:0,8:0,9:0,10:0,11:0,12:0,13:0,14:0,15:0,16:0,17:0,18:0,19:0,20:0 }
          var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
          for (var i = 0; i < tripArr.length; i++) {
              var _curData = tripArr[i];
              var _marker = new AMap.ElasticMarker({
                  position: _curData.slice(0,2),
                  zooms:[3,20],
                  styles:[{
                      icon:{
                          img:'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
                          size:[26,36],//可见区域的大小
                          ancher:[13,36],//锚点
                          fitZoom:13,//最合适的级别
                          scaleFactor:1.1,//地图放大一级的缩放比例系数
                          maxScale:1,//最大放大比例
                          minScale:0.5//最小放大比例
                      }
                  }],
                  zoomStyleMapping:zoomStyleMapping1,
                  map:map
              });
              _marker.content= (i+1).toString()+". "+_curData.slice(2,).toString();
              _marker.on('click', markerClick);
          }
          function markerClick(e) {
              infoWindow.setContent(e.target.content);
              infoWindow.open(map, e.target.getPosition());
          };
  
      </script>
  
  
      // trajectory moving
      <script>
          var marker_visible=false
          if (lineArr.length>0)
          {
              marker_visible=true
          };
          var marker_moving = new AMap.Marker({
              map: map,
              position: lineArr[0],
              icon: "https://webapi.amap.com/images/car.png",
              offset: new AMap.Pixel(-26, -13),
              autoRotation: true,
              angle:-90,
              visible:marker_visible,
          });
  
          // 全部轨迹
          var polyline = new AMap.Polyline({
              map: map,
              path: lineArr,
              showDir:true,
              strokeColor: "#BG3",  //线颜色
              strokeOpacity: 0.5,     //线透明度
              strokeWeight: 3,      //线宽
              // strokeStyle: "solid"  //线样式
          });
          // 当前轨迹
          var polyline2 = new AMap.Polyline({
              map: map,
              path: lineArr,
              showDir:true,
              strokeColor: "#28F",  //线颜色
              strokeOpacity: 1,     //线透明度
              strokeWeight: 6,      //线宽
              // strokeStyle: "solid"  //线样式
          });
          // 当前行驶经过的轨迹
          var passedPolyline = new AMap.Polyline({
              map: map,
              strokeColor: "#AF5",  //线颜色
              //strokeOpacity: 1,     //线透明度
              strokeWeight: 6,      //线宽
              // strokeStyle: "solid"  //线样式
          });
  
          // 当前数据明细
          var mass_style = {
                  url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
                  anchor: new AMap.Pixel(6, 6),
                  size: new AMap.Size(6, 6)
          }
          var linemarker = new AMap.Marker({content: ' ', map: map});
          mass = new AMap.MassMarks(null, {
              opacity: 0.4,
              zIndex: 111,
              cursor: 'pointer',
              style: mass_style
          });
          mass.setMap(map);
  
  
          function startAnimation () {
              var speed = document.getElementById("speed").value;
              var stroke = checkStroke(document.getElementById("stroke").value);
              updateAnimation(speed,stroke)
          }
          function pauseAnimation () {
              marker_moving.pauseMove();
          }
          function resumeAnimation () {
              marker_moving.resumeMove();
          }
  
          function checkStroke(stroke){
              if (stroke.trim()==''){
                  stroke='['+[0,tripList.length+1].toString( )+']';
              }
              else if(eval(stroke).slice(-1)>tripList.length+1){
                  stroke='['+[0,tripList.length+1].toString( )+']';
              }
              else{
                  stroke=stroke.toString()
              }
              document.getElementById("stroke").value=stroke
              return eval(stroke)
          };
  
          function updateAnimation(speed=200,stroke=[0,1]){
              _start=tripList[stroke[0]-1];
              if (stroke.slice(-1)>tripList.length){
                  _end=-1;
              }
              else{
                  _end=tripList[stroke.slice(-1)-1]+1;
              }
              var lineArr_cur = lineArr.slice(_start,_end);
              var massdata = massArr.slice(_start,_end);
              var mass_data=[];
              for (var i=0;i<massdata.length;i++){
                  mass_data[i]={'lnglat':massdata[i].slice(0, 2),'info':massdata[i].slice(2,)[0]}
              };
  
              // 当前轨迹
              map.remove(polyline2);
              polyline2 = new AMap.Polyline({
                  map: map,
                  path: lineArr_cur,
                  showDir:true,
                  strokeColor: "#28F",  //线颜色
                  strokeOpacity: 1,     //线透明度
                  strokeWeight: 6,      //线宽
                  // strokeStyle: "solid"  //线样式
              });
              // 当前行驶经过的轨迹
              map.remove(passedPolyline);
              passedPolyline = new AMap.Polyline({
                  map: map,
                  strokeColor: "#AF5",  //线颜色
                  //strokeOpacity: 1,     //线透明度
                  strokeWeight: 6,      //线宽
                  // strokeStyle: "solid"  //线样式
              });
              map.setFitView(polyline2);
              map.setCenter(lineArr_cur[0]);
              marker_moving.position=lineArr_cur[0];
              marker_moving.on('moving', function (e) {
                  passedPolyline.setPath(e.passedPath);
              });
              marker_moving.moveAlong(lineArr_cur, speed);
  
              //当前行程明细数据
              map.remove(mass);
              mass = new AMap.MassMarks(mass_data, {
                  opacity: 0.4,
                  zIndex: 111,
                  cursor: 'pointer',
                  style: mass_style
              });
              mass.on('mouseover', function (e) {
                  linemarker.setPosition(e.data.lnglat);
                  linemarker.setLabel({content: e.data.info})
              });
              mass.setMap(map);
  
          };
      </script>
  
      // markerArr
      <script>
          var zoomStyleMapping1 = { 3:0,4:0,5:0,6:0,7:0,8:0,9:0,10:0,11:0,12:0,13:0,14:0,15:0,16:0,17:0,18:0,19:0,20:0 }
          var infoWindow2 = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
  
          for (var i = 0; i < markerSet.length; i++) {
              var markerArr = markerSet[i].data;
              var markerImg = markerSet[i].img;
              for (var j = 0; j < markerArr.length; j++) {
                  var _curData = markerArr[j];
                  var marker = new AMap.ElasticMarker({
                      position:_curData.slice(0,2),
                      zooms:[3,20],
                      styles:[{
                          icon:{
                              img:markerImg,
                              size:[26,36],//可见区域的大小
                              ancher:[13,36],//锚点
                              fitZoom:13,//最合适的级别
                              scaleFactor:1.1,//地图放大一级的缩放比例系数
                              maxScale:1,//最大放大比例
                              minScale:0.5//最小放大比例
                          }
                      }],
                      zoomStyleMapping:zoomStyleMapping1,
                      map:map
                  })
                  marker.content= _curData.slice(2,).toString();
                  marker.on('click', markerClick);
              };
          };
          function markerClick(e) {
              infoWindow2.setContent(e.target.content);
              infoWindow2.open(map, e.target.getPosition());
          };
  
      </script>
  
      <script>
              map.setFitView();
      </script>
  </body>
  </html>