マップ上にマーカーがドロップされるので、私は地図の周りをポイントツーポイントでパンします。私が持っている問題は、パンニングが速すぎるということです。 panTo関数を遅くする方法はありますか?GoogleのpanTo機能をスローダウン
おかげで、 クリス悲しいこと
マップ上にマーカーがドロップされるので、私は地図の周りをポイントツーポイントでパンします。私が持っている問題は、パンニングが速すぎるということです。 panTo関数を遅くする方法はありますか?GoogleのpanTo機能をスローダウン
おかげで、 クリス悲しいこと
は、いや、あなたはpanToのアニメーションの速度を変更することはできません。
この関数は、ただ1つのlatlng引数をとります。詳細はこちら:http://code.google.com/apis/maps/documentation/javascript/reference.html#Map
私は自分で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
は、私はGoogleマップAPI v3の持つ「スローパン」を実装するための機能を書いたどのように動作するかのライブデモを見つけることができます。私は実装が少しシンプルだと思うが、それは小さなパンのステップと前の答えを使用します。 f_timeout()にイージング関数を使用することができます。
パラメータ
マップ:あなたのgoogle.maps.Mapオブジェクト
終了位置:にパンに目的の場所、google.maps.LatLng
n_intervals:パン間隔の数、より多くのトランジションはスムーズになりますがパフォーマンスは低下します
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);
};
残念ながら、しばしばマーカーが消えます。あまりにも多くの微妙な動きのマップのように思われる – djdance
これは私の場合、私のマーカーでは、ほとんどのマーカーがすでに画面上に表示されているときにうまく機能します。私はcodepenサンプルを適合させました。ありがとう@ErDmKo! –