Làm chậm chức năng panTo của google

Question

Tôi có một bản đồ kéo dài từ điểm này đến điểm khác quanh bản đồ khi các điểm đánh dấu được thả trên bản đồ. Vấn đề tôi gặp phải là quá trình di chuyển quá nhanh. Có cách nào để làm chậm chức năng panTo?

Cảm ơn, Chris

Answer 1

Đáng buồn thay, không có, bạn không thể thay đổi tốc độ của ảnh động panto.

Hàm chỉ nhận một đối số latlng duy nhất. Chi tiết tại đây: http://code.google.com/apis/maps/documentation/javascript/reference.html#Map

Answer 2

Tôi viết triển khai panTo của riêng mình. Sử dụng lớp "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); 
}; 

Bây giờ bạn có thể kiểm soát mọi thứ bao gồm thời lượng, các bước và tất nhiên chức năng giảm bớt. Dưới đây là một số ví dụ hay về nó http://easings.net/. Và bây giờ bạn có thể sử dụng nó một số như thế này:

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

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

Ở đây bạn có thể tìm thấy bản demo trực tiếp về cách hoạt động http://codepen.io/ErDmKo/pen/Jdpmzv

Answer 3

Tôi đã viết một chức năng để thực hiện một "chảo chậm" với Google Maps API v3. Nó sử dụng các bước pan nhỏ cũng như câu trả lời trước đó, mặc dù tôi nghĩ rằng việc triển khai thực hiện đơn giản hơn một chút. Bạn có thể sử dụng hàm easing cho f_timeout().

thông số

bản đồ: đối tượng google.maps.Map bạn

endPosition: mong muốn vị trí để pan đến, google.maps.LatLng

n_intervals: số khoảng chảo, càng có nhiều chuyển tiếp mượt mà hơn nhưng ít hiệu suất hơn

T_msec: tổng thời gian cho khoảng thời gian chậm hoàn thành (mili giây)

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