私はあちこちでかなりの数の検索を行いました。それらのどれも満足のいく答えを与えていません。私たちが知っているのは、Google Maps API v3 に制限があることだけです。panTo ターゲットが現在の中心の 1 ウィンドウの高さ/幅を超える場合、滑らかにならないということです。
それでも、目標に向かって「ジャンプ」するだけでなく、「ある程度」スムーズに実現したいと考えています。
これが私の解決策です(完璧ではありませんが、ジャンプするよりはましだと思います):
- 現在地と目的地の間の距離を計算する
- いくつかのセクションに分割し、各セクションは 1 つのウィンドウよりも少し小さい
- 各セクションに panTo を使用して、「部分的な」スムーズなアニメーションを実現します。
次のアルゴリズムで各セクション ターゲットを見つけても問題ありません。
- 現在は c(x,y)
- ターゲットはt(x,y)
- セクション数は s
- 各セクションは c(x) + (t(x) - c(x)) / s , c(y) + (t(y) - c(y)) / s
ここに問題があります: セクション数を計算する方法は?
現在のズーム レベルとウィンドウ サイズに基づく必要がありますよね?
わかりました、私はついにこのようなものを思いつきました、そしてそれはうまくいきます(しかしズームレベルは考慮しませんでした)
var distance = Math.sqrt(Math.abs(Math.pow(lastLocation.lat() - status.Lat, 2)) + Math.abs(Math.pow(lastLocation.lng() - status.Lng, 2)));
//console.info('last:' + lastLocation.lat() + ',' + lastLocation.lng());
//console.info('new:' + status.Lat + ',' + status.Lng);
//console.info('distance:' + distance);
var smoothFactor = 8.0 / 1440; //hard code for screen size without considering zoom as well...
var factor = $(window).width() * smoothFactor;
smoothPanSections = [];
var sectionCount = Math.ceil(distance / factor);
var sectionLat = (status.Lat - lastLocation.lat()) / sectionCount;
var sectionLng = (status.Lng - lastLocation.lng()) / sectionCount;
for (var i = 1; i <= sectionCount; i++) {
if (i < sectionCount) {
smoothPanSections.push({ Lat: lastLocation.lat() + sectionLat * i, Lng: lastLocation.lng() + sectionLng * i });
}
else
smoothPanSections.push({ Lat: status.Lat, Lng: status.Lng });
}
panStatus();
panStatus は次のとおりです。
function panStatus() {
if (smoothPanSections.length > 0) {
var target = smoothPanSections.shift();
//still have more sections
if (smoothPanSections.length > 0) {
google.maps.event.addListenerOnce(map, 'idle', function () {
window.setTimeout(function () {
panStatus();
}, 100);
});
}
var location = new google.maps.LatLng(target.Lat, target.Lng);
map.panTo(location, zoomSize);
}
}