Google Maps zoomOut-Pan-zoomIn animation

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 acerco a China, hago clic en el botón Francia. Quiero que se aleje gradualmente gradualmente, un nivel de zoom por vez. Cuando se aleja, debe desplazarse a la nueva ubicación y luego acercarse a la nueva ubicación un nivel de zoom en ese momento.

¿Cómo puedo hacer esto?

Answer 1

Necesita el método zoomOut con el parámetro de zoom continuo configurado para hacer el zoom y el método panTo para realizar el desplazamiento uniforme hacia el nuevo punto central.

se puede escuchar a los zoomEnd y moveEnd eventos en el objeto de mapa encadenar sus zoomOut, panTo y zoomIn métodos.

EDIT:

Así, en el curso de la implementación de una muestra para este problema, he descubierto que el parámetro de doContinuousZoomZoomIn y ZoomOut (o simplemente EnableContinuousZoom en el mapa) no funciona exactamente como se esperaba. Funciona bien cuando se reduce el zoom, si las teselas están en la memoria caché (este es un punto importante, si las teselas no están almacenadas en la memoria caché, entonces no es posible obtener la animación suave que está buscando), entonces hace una buena escala en las fichas para simular una animación de zoom suave e introduce un retraso de ~ 500 ms en cada paso de zoom para que pueda hacerlo de forma asíncrona (a diferencia de panTo, que verá en mi ejemplo que utilizo un setTimeout para llamar a 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 configurar explícitamente la versión del código de google maps, por lo que podría ser algo que se solucione en versiones posteriores. De todos modos, aquí está el sample code que es en su mayoría sólo Javascript a saltar aro 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 fiable, creo que tendría más sentido para hacer el procesamiento asíncrono para setZoom explícitamente (Igual que las cosas de panoramización).

Edit2:

por lo que el zoom de forma explícita asíncrono ahora (usando setTimeout con una sola zoom a la vez). También tengo que disparar eventos cuando ocurre cada zoom para que mis eventos encadenen correctamente. Parece que los eventos zoomEnd y panEnd se están llamando de forma síncrona.

La configuración de enableContinuousZoom en el mapa no parece funcionar, así que supongo que llamar a zoomOut, acercar con el param es la única manera de hacerlo funcionar.

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