Google Maps zoomOut-Pan-zoomIn Animation

Question

Ich frage mich, wie ich einen glatten Zoom in Animation mit dem Google Maps API erhalten.

Ich habe 2 Punkte, ein in, lassen Sie China sagen, und eine in Frankreich. Wenn ich auf China gezoomt, und klicken Sie auf die Schaltfläche Frankreich. Ich will es allmählich glatt, eine Zoomstufe zu der Zeit verkleinern. Wenn es herausgezoomt, um die sollte es an die neue Position zu verschieben, und dann auf die neue Standort einer Zoomstufe zu der Zeit vergrößern.

Wie kann ich das tun?

Answer 1

Sie müssen die zoomOut Methode mit dem kontinuierlichen Zoom-Parameter stellen Sie den Zoom und die panTo Methode zu tun die weichen Schwenke auf den neuen Mittelpunkt zu tun.

Sie können auf das hören zoomEnd und < a href = "http://code.google.com/apis/maps/documentation/reference.html#GMap2.moveend" rel = "noreferrer"> moveEnd Ereignisse auf der Karte Objekt zu verketten Ihren zoomOut, panTo und zoomIn Methoden.

EDIT:

So im Laufe einer Probe für dieses Problem der Implementierung, entdeckte ich, dass die doContinuousZoom param auf ZoomIn und ZoomOut (oder einfach nur auf der Karte EnableContinuousZoom) funktioniert nicht ganz wie erwartet. Es funktioniert ok, wenn Auszoomen, wenn die Kacheln im Cache sind (dies ist ein wichtiger Punkt, wenn die Fliesen nicht im Cache gespeichert werden, dann ist es nicht wirklich möglich, die flüssige Animation bekommen Sie sind nach), dann es einige schöne Skalierung macht auf die Fliesen eine glatte Zoom Animation zu simulieren, und führen eine ~ 500 ms Verzögerung auf jeder Zoomstufe, so dass Sie es (im Gegensatz zu panTo, die Sie in meinem Beispiel verwende ich ein setTimeout sehen async zu nennen) asynchron tun.

Leider ist das gleiche für die zoomIn Methode nicht wahr, die für jede Zoomstufe ohne die Skalierung Animation auf die Zielzoomstufe nur Sprünge. Ich habe nicht explizit Einstellung die Version für das Google Maps-Code versucht, so könnte dies etwas sein, das in späteren Versionen behoben wird. Wie auch immer, hier ist der Beispielcode die meist nur Javascript Hoop Springen und nicht so sehr mit dem Google Maps API:

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

Da dieser Ansatz ein bisschen unzuverlässig scheint, ich glaube, es würde mehr Sinn machen, die asynchrone Verarbeitung für setZoom zu tun explizit (Selben wie die Panning Sachen).

EDIT2:

Also habe ich die async tun explizit jetzt Zoomen (mit setTimeout mit einem einzigen Zoom zur gleichen Zeit). Ich muss auch Ereignisse ausgelöst, wenn jeder Zoom geschieht so, dass meine Ereignisse richtig Kette. Es scheint, wie die zoomEnd und panEnd Ereignisse synchron aufgerufen werden.

Einstellung enableContinuousZoom auf der Karte scheint nicht zu arbeiten, so dass ich zoomOut, zoomIn mit dem param erraten Aufruf ist der einzige Weg, das zu bekommen, zu arbeiten.

Answer 2

Hier ist mein Ansatz.

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

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

Answer 4

Für den Zoom dieses für mich gearbeitet schön:

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