Zoom di Google Maps Zoom out-pan-zoomIn

Question

Mi chiedo come posso ottenere uno zoom uniforme nell'animazione con l'API di Google Maps.

Ho 2 punti, uno dentro, diciamo la Cina, e uno in Francia. Quando ho ingrandito la Cina, fai clic sul pulsante Francia. Voglio che diminuisca gradualmente gradualmente, un livello di zoom alla volta. Quando viene ingrandito, dovrebbe spostarsi nella nuova posizione, quindi ingrandire la nuova posizione di un livello di zoom alla volta.

Come posso farlo?

Answer 1

Devi zoomOut con il parametro di zoom continuo impostato per eseguire lo zoom e il panTo per eseguire una panoramica uniforme sul nuovo punto centrale.

Puoi ascoltare zoomEnd e moveEnd eventi sull'oggetto mappa per concatenare i tuoi metodi zoomOut , panTo e zoomIn .

EDIT:

Quindi, nel corso dell'implementazione di un esempio per questo problema, ho scoperto che il parametro doContinuousZoom su ZoomIn e ZoomOut (o solo < code> EnableContinuousZoom sulla mappa) non funziona come previsto. Funziona bene quando si esegue lo zoom indietro, se i riquadri sono nella cache (questo è un punto importante, se i riquadri non sono memorizzati nella cache, non è davvero possibile ottenere l'animazione fluida che si sta cercando) quindi fa un buon ridimensionamento su i riquadri per simulare un'animazione uniforme dello zoom e introduce un ritardo di ~ 500 ms su ogni passaggio dello zoom in modo da poterlo eseguire in modo asincrono (a differenza di panTo , che vedrai nel mio esempio utilizzo un setTimeout per chiamare asincrono ).

Sfortunatamente lo stesso non è vero per il metodo zoomIn , che passa al livello di zoom target senza l'animazione di ridimensionamento per ciascun livello di zoom. Non ho provato a impostare esplicitamente la versione per il codice di google maps, quindi questo potrebbe essere risolto nelle versioni successive. Ad ogni modo, ecco il codice di esempio che è per lo più solo javascript hoop jumping e non tanto con Google API Maps:

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

Poiché questo approccio sembra un po 'inaffidabile, penso che avrebbe più senso eseguire esplicitamente l'elaborazione asincrona per setZoom (lo stesso del panning).

EDIT2:

Quindi eseguo lo zoom asincrono ora esplicitamente (usando setTimeout con un singolo zoom alla volta). Devo anche attivare eventi quando si verifica ogni zoom in modo che i miei eventi si incatenano correttamente. Sembra che gli eventi zoomEnd e panEnd vengano chiamati in modo sincrono.

L'impostazione di enableContinuousZoom sulla mappa non sembra funzionare, quindi immagino che chiamare zoomOut, zoomIn con il parametro sia l'unico modo per farlo funzionare.

Answer 2

Ecco il mio approccio.

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

Per lo zoom questo ha funzionato bene per me:

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