减慢谷歌 panTo 功能

Question

我有一张地图，当标记被放置在地图上时，它可以在地图周围从一个点平移到另一个点。我遇到的问题是平移太快。有什么办法可以减慢 panTo 功能的速度吗？

谢谢， 克里斯

Answer 1

遗憾的是，不，您无法更改 panTo 动画的速度。

该函数仅接受一个 latlng 参数。详细信息请参见：http://code.google.com/apis/地图/documentation/javascript/reference.html#Map

Answer 2

我编写了自己的 panTo 实现。使用“EasingAnimator”类。

var EasingAnimator = function(opt){
        opt = opt || {};
        this.easingInterval = opt.easingInterval;
        this.duration = opt.duration || 1000;
        this.step = opt.step || 50;
        this.easingFn = opt.easingFn  || function easeInOutElastic(t, b, c, d) {
            if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
            return -c/2 * ((t-=2)*t*t*t - 2) + b;
        };
        this.callBack = opt.callBack || function(){};
    };
EasingAnimator.makeFromCallback = function(callBack){
    return new EasingAnimator({
        callBack: callBack
    });
};
EasingAnimator.prototype.easeProp = function(obj, propDict){
    propDict = propDict || {};

    var self = this,
        t = 0,
        out_vals = JSON.parse(JSON.stringify(obj));

    clearInterval(self.easingInterval);
    self.easingInterval = setInterval(function(){
        t+= self.step;
        if (t >= self.duration) {
            clearInterval(self.easingInterval);
            self.callBack(propDict);
            return;
        }
        var percent = self.easingFn(t, 0, 1, self.duration);
        Object.keys(propDict).forEach(function(key, i) {
            var old_val = obj[key];

            out_vals[key] = old_val - percent*(old_val - propDict[key]);
        });
        self.callBack(out_vals);
    }, self.step);
};

现在您可以控制一切，包括持续时间、步骤，当然还有缓动功能。这里有一些很好的例子http://easings.net/。现在您可以像这样使用它：

dom_elem.addEventListener('click', function(event){
    var point = map.getCenter();

    easingAnimator.easeProp({
        lat: point.lat(),
        lng: point.lng()
    }, points[i]);
});

在这里您可以找到其工作原理的现场演示
http://codepen.io/ErDmKo/pen/Jdpmzv

Answer 3

我编写了一个函数来使用 Google Maps API v3 实现“慢摇”。它使用小平移步骤以及之前的答案，但我认为实现更简单一些。您可以对 f_timeout() 使用缓动函数。

参数

map：您的 google.maps.Map 对象

endPosition：所需的平移位置，google.maps.LatLng

n_intervals：平移间隔数，越多过渡越平滑，但性能越差

T_msec：慢摇镜头完成的总时间间隔（毫秒）

var slowPanTo = function(map, endPosition, n_intervals, T_msec) {
  var f_timeout, getStep, i, j, lat_array, lat_delta, lat_step, lng_array, lng_delta, lng_step, pan, ref, startPosition;
  getStep = function(delta) {
    return parseFloat(delta) / n_intervals;
  };
  startPosition = map.getCenter();
  lat_delta = endPosition.lat() - startPosition.lat();
  lng_delta = endPosition.lng() - startPosition.lng();
  lat_step = getStep(lat_delta);
  lng_step = getStep(lng_delta);
  lat_array = [];
  lng_array = [];
  for (i = j = 1, ref = n_intervals; j <= ref; i = j += +1) {
    lat_array.push(map.getCenter().lat() + i * lat_step);
    lng_array.push(map.getCenter().lng() + i * lng_step);
  }
  f_timeout = function(i, i_min, i_max) {
    return parseFloat(T_msec) / n_intervals;
  };
  pan = function(i) {
    if (i < lat_array.length) {
      return setTimeout(function() {
        map.panTo(new google.maps.LatLng({
          lat: lat_array[i],
          lng: lng_array[i]
        }));
        return pan(i + 1);
      }, f_timeout(i, 0, lat_array.length - 1));
    }
  };
  return pan(0);
};