Rallentamento funzione panTo di google

Question

Ho una mappa che si sposta da punto a punto intorno a una mappa mentre gli indicatori vengono rilasciati sulla mappa. Il problema che sto avendo è che il panning è troppo veloce. C'è un modo per rallentare la funzione panTo?

Grazie, Chris

Answer 1

Purtroppo, no, non è possibile modificare la velocità dell'animazione Panto.

La funzione richiede un solo argomento di latlng. Dettagli: http://code.google.com/apis/maps/documentation/javascript/reference.html#Map

Answer 2

Scrivo la mia implementazione di panTo. Utilizzando la classe "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); 
}; 

Ora è possibile controllare tutto compreso la durata, i passaggi e, naturalmente, la funzione di andamento. Ecco alcuni bei esempi di esso http://easings.net/. E ora si può utilizzare un po 'come questo:

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

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

Qui trovi demo live di come funziona http://codepen.io/ErDmKo/pen/Jdpmzv

Answer 3

Ho scritto una funzione per implementare un "slow pan" con Google Maps API v3. Usa piccoli passi di pan e la risposta precedente, anche se penso che l'implementazione sia un po 'più semplice. È possibile utilizzare una funzione di andamento per f_timeout().

Parametri

mappa: l'oggetto google.maps.Map

endPosition: posizione per eseguire una panoramica a desiderare, google.maps.LatLng

n_intervals: numero di intervalli pan, tanto più più liscia la transizione ma meno performante

T_msec: l'intervallo di tempo totale per il pan lento per completare (millisecondi)

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