首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >减慢谷歌panTo函数的速度

减慢谷歌panTo函数的速度
EN

Stack Overflow用户
提问于 2012-02-18 04:45:13
回答 2查看 10.8K关注 0票数 23

我有一张地图,当标记落在地图上时,它会从一个点移动到另一个点。我遇到的问题是平移太快了。有什么方法可以降低panTo函数的运行速度吗?

谢谢,克里斯

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-02-18 05:16:30

遗憾的是,不能更改panTo动画的速度。

该函数只接受一个latlng参数。详情请访问:http://code.google.com/apis/maps/documentation/javascript/reference.html#Map

票数 17
EN

Stack Overflow用户

发布于 2015-07-03 17:17:22

我编写自己的panTo实现。使用类"EasingAnimator“。

代码语言:javascript
复制
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/。现在你可以像这样使用它:

代码语言:javascript
复制
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

票数 17
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9335150

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档