[使用Google Maps API v3中的请求动画框架对地图标记进行动画处理

Question

我已经使用setTimeout为Google Maps API v3中的路线设置了Google Map标记的动画，但是我想找到一种使用请求动画框架来实现此目的的方法。但是，当我尝试执行此操作时-标记似乎只是从路径的开头跳到结尾，没有动画。有什么想法让我误入歧途吗？这是使用setTimeout编写的代码的相关部分，但您也可以在github中下载/查看文件：

self.animateRun = function(curDist){ //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;
  }

  var curPoint = racePath.GetPointAtDistance(curDist); 
  self.map.panTo(curPoint);
  runnerMarker.setPosition(curPoint);
  var newDist = curDist + runnerAnimationConfig.step;
  //requestAnimationFrame(self.animateRun(newDist));
  timerHandle = setTimeout("MAP.animateRun("+(curDist+runnerAnimationConfig.step)+")", runnerAnimationConfig.tick);

}

而且我尝试对请求动画帧进行的操作是将这段代码放在creativeJS中：

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

// requestAnimationFrame polyfill by Erik Möller
// fixes from Paul Irish and Tino Zijdel

(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
                                   || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

注释掉setTimeout并注释掉requestanimationframe行。但这没有用。

我想知道您是否可能无法传递参数，所以我将函数animateRun更改为不接受任何参数，而是引用了全局变量curDist，但这仍然行不通。我不确定还有什么尝试或可能出什么问题。我可以在requestanimationframe中找到该调用，并且可以正常工作-我什至已经输入了某种模数作为计时器来尝试降低它的速度（var frameCount = 0，每次调用animateRun时frameCount都会增加。如果framecount％100 = 0 ，请执行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);


          }

感谢您对解决此问题有任何想法。

Answer 1

[执行时：

requestAnimationFrame（self.animateRun）;

[您只需要将self.animateRun函数定义的值传递给requestAnimationFrame，而您真正需要做的是以对当前Class this的引用进行维护的方式传递对MapClass animateRun方法的特定实例的引用。对象（个体）。

然后，在您的startRunnerAnimation函数中，这将是一种监视地图对象tileloaded事件而不是setTimeout的更干净的解决方案

该函数看起来像这样：

将其以及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();});
    });
}

Answer 2

我想知道，有没有一种方法可以使标记基于实际驱动的距离，而不是基于预设的计时器？我的意思是实时查看我在路线上行驶的进度。设置计时器不能反映实际的驾驶状况？

有什么建议吗？谢谢