Google Maps zoom Out-Pan-zoomIn animación

Question

Me pregunto cómo puedo obtener un zoom suave en la animación con la API de Google Maps.

Tengo 2 puntos, uno en, digamos China y uno en Francia. Cuando me acerque a China y haga clic en el botón Francia. Quiero que se aleje gradualmente sin problemas, un nivel de zoom a la vez. Cuando se aleja, debe desplazarse a la nueva ubicación, y luego ampliar la nueva ubicación con un nivel de zoom en ese momento.

¿Cómo puedo hacer esto?

Answer 1

Necesita el zoomOut método con el parámetro de zoom continuo establecido para hacer el zoom y el panTo para hacer una panorámica suave hacia el nuevo punto central.

Puede escuchar el zoomEnd y moveEnd eventos en el objeto de mapa para encadenar sus métodos zoomOut , panTo y zoomIn .

EDITAR:

Entonces, en el curso de la implementación de una muestra para este problema, descubrí que el parámetro doContinuousZoom en ZoomIn y ZoomOut (o simplemente < El código> EnableContinuousZoom en el mapa) no funciona como se esperaba. Funciona bien cuando se aleja, si los mosaicos están en el caché (este es un punto importante, si los mosaicos no se almacenan en caché, entonces no es realmente posible obtener la animación uniforme que está buscando), entonces se aplica una buena escala los mosaicos para simular una animación de zoom suave e introduce un retraso de ~ 500 ms en cada paso del zoom para que pueda hacerlo de forma asíncrona (a diferencia de panTo , que verá en mi ejemplo, uso setTimeout para llamar async )

Lamentablemente, no ocurre lo mismo con el método zoomIn , que simplemente salta al nivel de zoom objetivo sin la animación de escala para cada nivel de zoom. No he intentado establecer explícitamente la versión para el código de Google Maps, por lo que esto podría ser algo que se corrige en versiones posteriores. De todos modos, aquí está el código de muestra que en su mayoría es solo un salto de aro de JavaScript y no tanto con Google API de Maps:

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

Debido a que este enfoque parece un poco poco confiable, creo que tendría más sentido hacer el procesamiento asíncrono para setZoom explícitamente (igual que las cosas de la panorámica).

EDIT2:

Entonces hago el zoom asíncrono explícitamente ahora (usando setTimeout con un solo zoom a la vez). También tengo que disparar eventos cuando ocurre cada zoom para que mis eventos se encadenen correctamente. Parece que los eventos zoomEnd y panEnd se llaman de forma sincrónica.

La configuración de enableContinuousZoom en el mapa no parece funcionar, así que supongo que llamar a zoomOut, zoomIn con el parámetro es la única manera de hacer que eso funcione.

Answer 2

Aquí está mi enfoque.

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

Para el zoom este me funcionó muy bien:

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