Замедлите функцию Google PanTo

Question

У меня есть карта, которая перемещается от точки к точке вокруг карты, когда на карте сбрасываются маркеры. У меня проблема в том, что панорамирование слишком быстрое. Есть ли способ замедлить функцию панорамирования?

Спасибо, Chris

Answer 1

Я пишу свою собственную реализацию 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 2

К сожалению, нет, вы не можете изменить скорость анимации panTo.

Функция принимает только один аргумент latlng. Подробности здесь: http://code.google.com/apis/maps/documentation/javascript/reference.html#Map

Answer 3

Я написал функцию для реализации «медленного панорамирования» с помощью Google Maps API v3.Он использует маленькие шаги панорамирования, как и предыдущий ответ, хотя я думаю, что реализация немного проще.Вы можете использовать функцию замедления для f_timeout ().

Параметры

map: ваш объект google.maps.Map

endPosition: желаемое местоположение дляpan to, 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);
};