web-dev-qa-db-ja.com

GoogleマップzoomOut-Pan-zoomInアニメーション

Google MapsAPIを使用してアニメーションをスムーズに拡大するにはどうすればよいのでしょうか。

私は2つのポイントを持っています。1つは中国、もう1つはフランスです。中国にズームインして、[フランス]ボタンをクリックします。一度に1ズームレベルずつ、徐々にスムーズにズームアウトしていきたいです。ズームアウトすると、新しい場所にパンしてから、一度に1ズームレベルずつ新しい場所にズームインする必要があります。

これどうやってするの？

javascriptgoogle-mapssettimeout
19
Sindre Sorhus

ズームを実行するには連続ズームパラメータを設定した zoomOut メソッドが必要であり、新しい中心点にスムーズにパンするには panTo メソッドが必要です。

マップオブジェクトの zoomEnd および moveEnd イベントをリッスンして、zoomOut、panTo、およびzoomInメソッドをチェーンできます。

編集：

したがって、この問題のサンプルを実装する過程で、doContinuousZoomとZoomIn（またはマップ上のZoomOut）のEnableContinuousZoomパラメーターが期待どおりに機能しないことを発見しました。ズームアウトするときは問題なく動作します。タイルがキャッシュにある場合（これは重要なポイントです。タイルがキャッシュされていない場合、目的のスムーズなアニメーションを取得することは実際には不可能です）、それからいくつかの素晴らしいスケーリングを行いますタイルはスムーズなズームアニメーションをシミュレートし、各ズームステップで最大500ミリ秒の遅延を導入して、非同期で実行できるようにします（panToとは異なり、私の例ではsetTimeoutを使用して非同期を呼び出します）。

残念ながら、同じことはzoomInメソッドには当てはまりません。このメソッドは、各ズームレベルのスケーリングアニメーションなしでターゲットズームレベルにジャンプするだけです。グーグルマップコードのバージョンを明示的に設定しようとしたことがないので、これは後のバージョンで修正される可能性があります。とにかく、ここに サンプルコード があります。これはほとんどがJavaScriptのフープジャンプであり、Google MapsAPIではそれほど多くありません。

http://www.cannonade.net/geo.php?test=geo2

このアプローチは少し信頼性が低いように思われるので、setZoomの非同期処理を明示的に行う方が理にかなっていると思います（パンと同じです）。

EDIT2：

そのため、非同期ズームを明示的に実行します（一度に1つのズームでsetTimeoutを使用）。また、イベントが正しくチェーンされるように、ズームが発生するたびにイベントを発生させる必要があります。 zoomEndイベントとpanEndイベントが同期して呼び出されているようです。

マップ上でenableContinuousZoomを設定しても機能しないようです。そのため、zoomOutを呼び出すと、paramを指定したzoomInがそれを機能させる唯一の方法だと思います。

16
RedBlueThing

これが私のアプローチです。

var point = markers[id].getPosition(); // Get marker position
map.setZoom(9); // Back to default zoom
map.panTo(point); // Pan map to that position
setTimeout("map.setZoom(14)",1000); // Zoom in after 1 sec
3
Erevald
var zoomFluid, zoomCoords;   //shared variables

function plotMarker(pos, name){
    var marker = new google.maps.Marker({
        map: map,
        title:name,
        animation: google.maps.Animation.DROP,
        position: pos
    });
    google.maps.event.addListener(marker, 'click', function(){
            zoomCoords = marker.getPosition();     //Updates shared position var
            zoomFluid = map.getZoom();            //Updates shared zoom var;
            map.panTo(zoomCoords);       //initial pan
            zoomTo();                   //recursive call
    });

}

//  increases zoomFluid value at 1/2  second intervals
function zoomTo(){
    //console.log(zoomFluid);
    if(zoomFluid==10) return 0;
    else {
         zoomFluid ++;
         map.setZoom(zoomFluid);
         setTimeout("zoomTo()", 500);
    }
}
3
tetris11

ズームの場合、これは私にとってうまく機能しました：

function animateMapZoomTo(map, targetZoom) {
    var currentZoom = arguments[2] || map.getZoom();
    if (currentZoom != targetZoom) {
        google.maps.event.addListenerOnce(map, 'zoom_changed', function (event) {
            animateMapZoomTo(map, targetZoom, currentZoom + (targetZoom > currentZoom ? 1 : -1));
        });
        setTimeout(function(){ map.setZoom(currentZoom) }, 80);
    }
}
0
Igor Mukhin