H5移动端 高德地图 巡查轨迹回放 2.0版

注意是HTTPS还是HTTP
index.html引入
<script type="text/javascript" src="http://webapi.amap.com/maps?v=2.0&key=0250860ccb5953fa5d655e8acf40ebb7&plugin=AMap.Geocoder"></script>

   //地图
    renderMap (data) {
      var marker = [];
      var that = this

      for (let i in JSON.parse(data.coordinate)) {
        let Ary = [];
        Ary.push(Number(JSON.parse(data.coordinate)[i].o));
        Ary.push(Number(JSON.parse(data.coordinate)[i].p));
        marker.push(Ary);
      }
      var lineArr = marker

		上面是后端返回的数据 自己处理成官方需要的格式

      AMap.plugin('AMap.MoveAnimation', function () {
        // var marker, lineArr = [[116.478935, 39.997761], [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], [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], [116.483633, 39.998935], [116.48367, 39.998968], [116.484648, 39.999861]];


        var map = new AMap.Map("container", {
          resizeEnable: true,
          center: [116.397428, 39.90923],
          zoom: 17
        });

        marker = new AMap.Marker({
          map: map,
          position: marker[0],
          icon: "static/images/xcjl/dws_icon.png",
          offset: new AMap.Pixel(-15, -16),
        });

        // 绘制轨迹
        var polyline = 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",  //线颜色
          strokeWeight: 6,      //线宽
        });


        marker.on('moving', function (e) {
          passedPolyline.setPath(e.passedPath);
          map.setCenter(e.target.getPosition(), true)
        });

        map.setFitView();

        window.startAnimation = function startAnimation () {
          marker.moveAlong(lineArr, {
            // 每一段的时长
            duration: 100,//可根据实际采集时间间隔设置
            // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
            autoRotation: true,
          });
        };

        // window.pauseAnimation = function () {
        //     marker.pauseMove();
        // };

        // window.resumeAnimation = function () {
        //     marker.resumeMove();
        // };

        // window.stopAnimation = function () {
        //     marker.stopMove();
        // };
      });
    },