在Google Maps V3中设置多路径折线动画

Question

我正在尝试在我正在构建的自定义地图上为所有类型的折线设置动画。我可以为两点之间的线设置动画，但我也有一些连续两点以上的折线。当我尝试为它们设置动画时，整条线旋转并离开屏幕。如果有两个以上的点，我怎么能画出每一条线？

    // Initializing Paths
    var flightPlan = {
      one: [
        new google.maps.LatLng(7.119206, -73.132978),
        new google.maps.LatLng(17.1907805, -88.320144),
        new google.maps.LatLng(33.7677129, -84.4206039)
      ],
      two: [
        new google.maps.LatLng(7.119206, -73.132978),
        new google.maps.LatLng(25.782324, -80.2310801)
      ],
      three: [
        new google.maps.LatLng(10.4001576, -75.5079229),
        new google.maps.LatLng(21.552925, -85.720258),
        new google.maps.LatLng(29.1055596, -90.19444)
      ]
    };

    // Initialization of Polylines
    flightPath_1 = new google.maps.Polyline({
      path: flightPlan.one,
      geodesic: true,
      strokeOpacity: 0,
      icons: [
        {
          icon: lineSymbol,
          offset: '100%'
        }, {
          icon: lineSymbolTwo,
          offset: '0',
          repeat: '15px'
        },
      ],
      strokeOpacity: 0,
      strokeColor: '#f00',
      map: map
    });

    flightPath_2 = new google.maps.Polyline({
      path: flightPlan.two,
      geodesic: true,
      strokeOpacity: 0,
      icons: [
        {
          icon: lineSymbol,
          offset: '100%'
        }, {
          icon: lineSymbolTwo,
          offset: '0',
          repeat: '15px'
        },
      ],
      strokeOpacity: 0,
      strokeColor: '#f00',
      map: map
    });

    flightPath_3 = new google.maps.Polyline({
      path: flightPlan.three,
      geodesic: true,
      strokeOpacity: 0,
      icons: [
        {
          icon: lineSymbol,
          offset: '100%'
        }, {
          icon: lineSymbolThree,
          offset: '0',
          repeat: '10px'
        },
      ],
      strokeOpacity: 0,
      strokeColor: '#00f',
      map: map
    });

    // Draws out polylines
    var drawOut = function(line) {
      setTimeout(function() {
          line.setMap(map);
          // flightPathProgress.setMap(map);
          line.setOptions({
              strokeOpacity: 0
          });

          var progress = 0,
              lineArray = line.getPath().getArray(),
              lineLength = lineArray.length;

          for (var i = 0; i < lineLength - 1; i++) {
            var startPoint = lineArray[i],
                nextPoint = lineArray [i + 1];

            var intvl = setInterval(function() {

                progress += 0.01;

                if (progress > 1) { 
                    clearInterval(intvl);
                    running = false;
                } else {
                    // animation is still running
                    running = true;
                }

                // calculate progress
                var progressLatLng = google.maps.geometry.spherical.interpolate(startPoint, nextPoint, progress);

                // update polyline
                line.setOptions({
                    // strokeOpacity: progress,
                    path: [lineArray[0], progressLatLng]
                });
            }, 50);
          }
      }, 1000);
    }



  google.maps.event.addDomListener(window, 'load', initialize);

我发现了类似的SO question，但从未发布过解决方案。

这是我的JSFiddle。蓝色折线显示问题，右边的红线显示我希望在加载时实现的动画，左边的红线显示多路折线应该类似的内容。