Google Maps zoomOut-Pan-zoomInアニメーション

StackOverflow https://stackoverflow.com/questions/816100

質問

Google Maps APIを使用してアニメーションをスムーズにズームする方法を知りたい。

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

これを行うにはどうすればよいですか

役に立ちましたか？

解決

zoomOut ズームを行うように設定された連続ズームパラメータと panTo メソッドを使用して、新しい中心点にスムーズにパンします。

zoomEnd および moveEnd マップオブジェクトのイベントを使用して、 zoomOut 、 panTo 、および zoomIn メソッドを連結します。

編集：

この問題のサンプルを実装する過程で、 ZoomIn および ZoomOut の doContinuousZoom パラメータ（または< code> EnableContinuousZoom をマップ上で）は期待どおりに機能しません。タイルがキャッシュ内にある場合、ズームアウト時に問題なく動作します（これは重要なポイントです。タイルがキャッシュされていない場合、スムーズなアニメーションを取得することは実際には不可能です）。タイルはスムーズなズームアニメーションをシミュレートし、各ズームステップで〜500 msの遅延を導入するため、非同期で実行できます（ panTo とは異なり、この例ではsetTimeoutを使用して非同期を呼び出します） ）。

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

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

このアプローチは少し信頼性が低いと思われるため、setZoomの非同期処理を明示的に行う方が適切だと思います（パンニングの場合と同じ）。

EDIT2：

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

マップでenableContinuousZoomを設定しても機能しないようです。そのため、zoomOutを呼び出すには、paramを指定してzoomInを使用するしかありません。

他のヒント

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

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

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);
    }
}

ズームの場合、これはうまく機能しました：

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);
    }
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top