动画速度滑块不工作

时间:2015-02-19 07:09:57

标签: javascript angularjs google-maps google-maps-api-3 google-polyline

我在Google地图中创建了一个应用程序,其中显示了GPS跟踪的预览。预览将是Google地图中绘制的GPS坐标,就像动画一样。

应用程序工作正常,但问题是,我有一个动画速度增加和减少滑块,这将增加和减少滑动时的动画速度,这在我的应用程序中无法正常工作。

任何人都可以告诉我一些解决方案吗

我的代码如下所示,带有一个Plunker

<div style="width: 880px;">
    200 <slider style="width:400px;" floor="200" ceiling="1000" step="1" ng-model="speedSlider"></slider>{{speedSlider}}
  <div id="map" style="width: 880px; height: 500px; float: left;"></div>
</div>

Plunker

1 个答案:

答案 0 :(得分:1)

if (!_.isEmpty(items)) {

        var timerId = getTimeInterval();

        function getTimeInterval() {
          return setInterval(function () {       
            route.getPath().push(new google.maps.LatLng(items[index].lat, items[index].lng));

            moveMarker(map, marker, items[index].lat, items[index].lng);
            markLAT = items[index].lat;
            markLNG = items[index].lng;
            index++;

            if (index == items.length) {
                clearInterval(timerId);
            }
          }, (1000 - $scope.speedSlider));
        }

        $scope.$watch('speedSlider', function(ssss) {
          clearInterval(timerId);
          timerId = getTimeInterval();
        });

      }

Plunker