javascript - route - maps google js effects

Google Maps zoomOut-Pan-zoomIn animación

Question

Me pregunto cómo lograr 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, con un nivel de zoom en ese momento. Cuando se aleja, debe desplazarse a la nueva ubicación y, a continuación, ampliar la nueva ubicación con un nivel de zoom en ese momento.

¿Cómo puedo hacer esto?

Answer 1

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 2

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

Answer 3

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

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

EDITAR:

Así que en el curso de la implementación de una muestra para este problema, descubrí que el doContinuousZoom en ZoomIn y ZoomOut (o simplemente 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 suave que busca), entonces hace un buen escalado Los mosaicos simulan una animación de zoom suave e introducen 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).

Desafortunadamente, no ocurre lo mismo con el método zoomIn , que solo 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 javascript hoop jumping y no tanto con la API de Google 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:

Así que ahora hago el zoom asíncrono explícitamente (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 síncrona.

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

Answer 4

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