如何使用播放，暂停，重置功能控制许多折线上的符号(使用谷歌地图API)

我在这里画了很多折线。我已经实现了一个播放，暂停，重置功能来控制折线上的符号。

然而，我想实现许多折线，并通过相同的按钮控制他们的动画。我有个问题。除了一行，我不能控制所有的动画

在geocodezip(我猜是Lawrence Ross)的帮助下，我能够实现滑动条。

JSfiddle

      // This example adds an animated symbol to a polyline.
  function initMap() {
            var line;
    var line1;
    var intervalForAnimation;
    var count = 0;
    var n = 2;
    var lineArray;
    var lineArray1;
    var allPath = [
      new google.maps.LatLng(37.772323, -122.214897),
      new google.maps.LatLng(21.291982, -157.821856),
      new google.maps.LatLng(-18.142599, 178.431),
      new google.maps.LatLng(-27.46758, 153.027892),
      new google.maps.LatLng(12.97918167,   77.6449),
    ];
    var Colors = [
    "#FF0000", 
    "#00FF00", 
    "#0000FF", 
    "#FFFFFF", 
    "#000000", 
    "#FFFF00", 
    "#00FFFF", 
    "#FF00FF"
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 19.0760, lng: 72.8777},
      zoom: 5,
      styles: [
        {
          featureType: 'all',
          stylers: [
            { saturation: -80 }
          ]
        },{
          featureType: 'road.arterial',
          elementType: 'geometry',
          stylers: [
            { hue: '#00ffee' },
            { saturation: 50 }
          ]
        },{
          featureType: 'poi.business',
          elementType: 'labels',
          stylers: [
            { visibility: 'off' }
          ]
        }
      ]
    });
    // Define the symbol, using one of the predefined paths ('CIRCLE')
    // supplied by the Google Maps JavaScript API.
      var symbolSource = {
      path: 'M -2,-2 2,2 M 2,-2 -2,2',
      strokeColor: '#FF0000',
      strokeWeight: 4
    };
    var symbolShape = {
      path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
      strokeColor: '#0000FF',
      strokeOpacity: 1.0
    };
    var symbolDestination = {
      path: 'M -2,-2 2,2 M 2,-2 -2,2',
      strokeColor: '#292',
      strokeWeight: 4
    };
    // Create the polyline and add the symbol to it via the 'icons' property.
    //I used this earlier and it worked good. 
    /*line = new google.maps.Polyline({
      path: [{lat: -33.918861, lng: 18.423300}, {lat: -35.842160, lng: 18.863525}, {lat: -39.170387, lng: 35.189209}, {lat: -26.331494, lng: 54.228516}, {lat: 0.462885, lng: 61.083984}, {lat: 19.075984, lng: 72.877656}],
      icons: [
        {
          icon: symbolShape,
          offset: '0%'
        }
      ],
      strokeColor: '#0000FF ',
      strokeOpacity: 0,
      map: map
    });*/
    //Our Secondary polyline for reseting purpose. I used this earlier and it worked good. 
    /*var line1 = new google.maps.Polyline({
      path: [{lat: -33.918861, lng: 18.423300}, {lat: -35.842160, lng: 18.863525}, {lat: -39.170387, lng: 35.189209}, {lat: -26.331494, lng: 54.228516}, {lat: 0.462885, lng: 61.083984}, {lat: 19.075984, lng: 72.877656}],
      icons: [
        {
          icon: symbolSource,
          offset: '0%'
        }, {
          icon: symbolDestination,
          offset: '100%'
        }
      ],
      strokeColor: '#0000FF ',
      strokeOpacity: 0.8,
      map: map
    });*/
     //I tried to implement this code to create many polylines and add them to an array.
     //So that later on I can control the animation on them at once using my Play,Pause and Reset.
      for (var i = 0; i < allPath.length-1; i++) {
          var line = new google.maps.Polyline({
          path: [allPath[i], allPath[i+1]],
          icons: [
            {
              icon: symbolShape,
              offset: '0%'
            }
          ],
          strokeColor: Colors[i],
          strokeOpacity: 0.0,
          strokeWeight: 2,
          map: map
        });
         lineArray[i] = line;
        }
            //This is my Secondary polyline which is used for reseting purpose. 
    for (var i = 0; i <allPath.length-1; i++) {
        line1 = new google.maps.Polyline({
          path: [allPath[i], allPath[i+1]],
          icons: [
            {
              icon: symbolSource,
              offset: '0%'
            }, {
              icon: symbolDestination,
              offset: '100%'
            }
          ],
          strokeColor: Colors[i],
          strokeOpacity: 1.0,
          strokeWeight: 2,
          map: map
        });
        lineArray1[i] = line1;
      }
        console.log(lineArray.length);
        console.log(lineArray1.length);
      //Map boundaries
      var bounds = new google.maps.LatLngBounds();
        for (var i = 0; i < line.getPath().getLength(); i++) {
          bounds.extend(line.getPath().getAt(i));
        }
      map.fitBounds(bounds);

    function playing() {
        for(var i=0;i<allPath.length;i++){
          intervalForAnimation = window.setInterval(function() {
              $("#map").after(animateCircle(lineArray,lineArray1,count,i));
              count = (count+0.2) % 200;
          }, 20);
        }
      }
      //Play Function
      $(".play").click(function() {
          playing();
      });
                //Pause Function
      $(".pause").click(function() {
          clearInterval(intervalForAnimation);
      });
      //Reset Function
      $(".reset").click(function(){
          count = 0;
          for(var i=0;i<allPath.length;i++){
              line1 =  lineArray1[i];
              line1.setMap(map);
          }
      });

  // Use the DOM setInterval() function to change the offset of the symbol
  // at fixed intervals.
  function animateCircle(lineArray,lineArray1,count,i) {
      line = lineArray[i];
      line1 = lineArray1[i];
      var icons = line.get('icons');
      icons[0].offset = (count / 2) + '%';
      line.set('icons', icons);
      //The Slider Function call
      $("#slider").slider("value", count);
      if (count >= 199){ 
        clearInterval(intervalForAnimation);
        line1.setMap(null);
      };
  }
}

感谢您的阅读。