20

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

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

これどうやってするの？

4

4 に答える 4

16

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

マップ オブジェクトのzoomEndおよびイベントをリッスンして、およびメソッドを連鎖させることができます。moveEndzoomOutpanTozoomIn

編集：

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

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

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

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

EDIT2：

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

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

于 2009-05-03T02:25:03.350 に答える
4

Here's my approach.

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
于 2012-05-05T10:25:17.527 に答える
3 
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);
    }
}
于 2012-07-08T16:10:36.833 に答える