Desaceleración de la función google panTo

Question

Tengo un mapa que se desplaza de un punto a otro alrededor de un mapa a medida que los marcadores se sueltan en el mapa. El problema que estoy teniendo es que el panorama es demasiado rápido. ¿Hay alguna manera de ralentizar la función panTo?

Gracias, Chris

Answer 1

Lamentablemente, no, no se puede cambiar la velocidad de la animación panTo.

La función solo requiere un único argumento latlng. Detalles aquí: http://code.google.com/apis/maps/documentation/javascript/reference.html#Map

Answer 2

Escribo mi propia implementación de panTo. Usando la clase "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); 
}; 

Ahora puede controlar todo, incluyendo la duración, los pasos y por supuesto la función de aceleración. Aquí hay algunos buenos ejemplos de él http://easings.net/. Y ahora se puede usar un poco de la siguiente manera:

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

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

Aquí se encuentran demostración en vivo de cómo funciona http://codepen.io/ErDmKo/pen/Jdpmzv

Answer 3

escribí una función para implementar un "pan lento" con Google Maps API v3. Utiliza pequeños pasos de panorámica así como la respuesta anterior, aunque creo que la implementación es un poco más simple. Puede usar una función de aceleración para f_timeout().

Parámetros

mapa: su objeto google.maps.Map

endPosition: ubicación para desplazarse a deseada, google.maps.LatLng

n_intervals: número de intervalos de pan, más la transición es más fluida pero la menos efectiva

T_msec: el intervalo total de tiempo para completar la panoramización lenta (milisegundos)

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); 
};