Javascript 在google maps api v3中使用请求动画帧为地图标记设置动画

我已经在GoogleMapsAPIv3中使用setTimeout在路线周围制作了一个GoogleMap标记的动画，但是我想找到一种使用请求动画帧的方法。然而，当我尝试这样做时，标记似乎只是从路径的开始跳到了终点，没有动画。知道我要误入歧途吗？下面是我使用setTimeout的代码的相关部分，但您也可以在中下载/查看文件：

我尝试使用请求动画帧来放置以下代码：

如果您对如何解决此问题有任何想法，请向我们表示感谢。

如果您有：

requestAnimationFrame（self.animateRun）

仅将self.animateRun函数定义的值传递给requestAnimationFrame，而实际需要做的是以维护对当前“this”对象（self）的引用的方式传递对MapClass的animateRun方法的特定实例的引用

然后，在startRunnerAnimation函数中，监视map objects tilesloaded事件而不是setTimeout将是一个更干净的解决方案

该函数看起来像这样：

var curDist = 0;
var curFrame = 0;
runnerAnimationConfig.step = 5;

    self.animateRun = function(){ //moves the runner



            if (curDist > runnerAnimationConfig.dist) { //if we've passed the end point, exit this loop and focus on the endpoint

              var endLatLng = getLatLng(raceMarkers.endPoint.lat,raceMarkers.endPoint.lng);

              self.map.panTo(endLatLng);
              runnerMarker.setPosition();
              return;
            }

            if (curFrame%100 === 0){

            var curPoint = racePath.GetPointAtDistance(curDist); 
            self.map.panTo(curPoint);
            runnerMarker.setPosition(curPoint);

            }

            curFrame += 1;
            curDist = curDist + runnerAnimationConfig.step;

            requestAnimationFrame(self.animateRun);


          }

将其以及startRunnerAnimation（）函数更改为以下内容：

self.curDist = 0;

self.animateRun = function(){ //moves the runner
        if (self.curDist > runnerAnimationConfig.dist) { //if we've passed the end point, exit this loop and focus on the endpoint
          var endLatLng = getLatLng(raceMarkers.endPoint.lat,raceMarkers.endPoint.lng);
          self.map.panTo(endLatLng);
          runnerMarker.setPosition();
          return;
        }
        var curPoint = racePath.GetPointAtDistance(self.curDist); 
        self.map.panTo(curPoint);
        runnerMarker.setPosition(curPoint);
        self.curDist += runnerAnimationConfig.step;
        window.requestAnimationFrame(function () {self.animateRun();});
};

function startRunnerAnimation(){
    runnerAnimationConfig.dist = racePath.Distance();
    self.map.setCenter(racePath.getPath().getAt(0));
    var lstnr = google.maps.event.addListener(self.map, 'tilesloaded', function () {
         //only want this happening on initial load, not every time the tiles change
        google.maps.event.removeListener(lstnr);
        window.requestAnimationFrame(function () {self.animateRun();});
    });
}

var curDist = 0;
var curFrame = 0;
runnerAnimationConfig.step = 5;

    self.animateRun = function(){ //moves the runner



            if (curDist > runnerAnimationConfig.dist) { //if we've passed the end point, exit this loop and focus on the endpoint

              var endLatLng = getLatLng(raceMarkers.endPoint.lat,raceMarkers.endPoint.lng);

              self.map.panTo(endLatLng);
              runnerMarker.setPosition();
              return;
            }

            if (curFrame%100 === 0){

            var curPoint = racePath.GetPointAtDistance(curDist); 
            self.map.panTo(curPoint);
            runnerMarker.setPosition(curPoint);

            }

            curFrame += 1;
            curDist = curDist + runnerAnimationConfig.step;

            requestAnimationFrame(self.animateRun);


          }

self.curDist = 0;

self.animateRun = function(){ //moves the runner
        if (self.curDist > runnerAnimationConfig.dist) { //if we've passed the end point, exit this loop and focus on the endpoint
          var endLatLng = getLatLng(raceMarkers.endPoint.lat,raceMarkers.endPoint.lng);
          self.map.panTo(endLatLng);
          runnerMarker.setPosition();
          return;
        }
        var curPoint = racePath.GetPointAtDistance(self.curDist); 
        self.map.panTo(curPoint);
        runnerMarker.setPosition(curPoint);
        self.curDist += runnerAnimationConfig.step;
        window.requestAnimationFrame(function () {self.animateRun();});
};

function startRunnerAnimation(){
    runnerAnimationConfig.dist = racePath.Distance();
    self.map.setCenter(racePath.getPath().getAt(0));
    var lstnr = google.maps.event.addListener(self.map, 'tilesloaded', function () {
         //only want this happening on initial load, not every time the tiles change
        google.maps.event.removeListener(lstnr);
        window.requestAnimationFrame(function () {self.animateRun();});
    });
}