2

私はあちこちでかなりの数の検索を行いました。それらのどれも満足のいく答えを与えていません。私たちが知っているのは、Google Maps API v3 に制限があることだけです。panTo ターゲットが現在の中心の 1 ウィンドウの高さ/幅を超える場合、滑らかにならないということです。

それでも、目標に向かって「ジャンプ」するだけでなく、「ある程度」スムーズに実現したいと考えています。

これが私の解決策です（完璧ではありませんが、ジャンプするよりはましだと思います）：

  1. 現在地と目的地の間の距離を計算する
  2. いくつかのセクションに分割し、各セクションは 1 つのウィンドウよりも少し小さい
  3. 各セクションに 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);
    }
}
4

0 に答える 0