減慢谷歌泛到功能

Question

我有一個地圖，圍繞着地圖從點到點，因爲標記被放在地圖上。我遇到的問題是平移太快。有沒有辦法減慢panTo功能？

謝謝， 克里斯

Answer 1

可悲的是，不，你不能改變的啞劇動畫的速度。

函數只需要一個latlng參數。詳情在這裏：http://code.google.com/apis/maps/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

我寫了實施「慢鍋」與谷歌地圖API V3的功能現場演示。它使用小的平移步驟以及之前的答案，但我認爲實現更簡單一些。您可以使用f_timeout（）的緩動函數。

參數

地圖：你google.maps.Map對象

終端位置：所需位置平移來，google.maps.LatLng

n_intervals：泛間隔的數目越多，轉換更平滑但性能更低012_

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