animação do Google Maps zoomOut-Pan-zoomIn

Question

Eu estou querendo saber como eu recebo um zoom suave em animação com a API do Google Maps.

Eu tenho 2 pontos, um em, digamos China, e uma em França. Quando estou ampliado em China, e clique no botão França. Eu quero que ele ampliar gradualmente suave, um nível de zoom no momento. Quando é ampliada para fora deve deslocar para o novo local, e, em seguida, ampliar a nova localização de um nível de zoom no momento.

Como posso fazer isso?

Answer 1

Você precisa do href="http://code.google.com/apis/maps/documentation/reference.html#GMap2.zoomOut" rel="noreferrer"> método zoomOut com a contínua zoom conjunto de parâmetros para fazer o zoom eo método panTo para fazer o panning suave para o novo ponto central.

Você pode ouvir o zoomEnd e < a href = "http://code.google.com/apis/maps/documentation/reference.html#GMap2.moveend" rel = "noreferrer"> eventos moveEnd no objeto mapa para encadear seu zoomOut, panTo e zoomIn métodos.

EDIT:

Assim, no decurso da execução de uma amostra para este problema, eu descobri que o param doContinuousZoom em ZoomIn e ZoomOut (ou apenas EnableContinuousZoom no mapa) não funciona muito bem como esperado. Ele funciona ok quando o zoom out, se as telhas estão no cache (este é um ponto importante, se as telhas não são armazenados em cache, então não é realmente possível para obter a animação suave que você está depois), então ele faz algum bom escalonamento on as telhas para simular uma animação de zoom suave e introduz um ~ 500 ms atrasar em cada passo do zoom para que você possa fazê-lo de forma assíncrona (ao contrário panTo, que você vai ver no meu exemplo, eu uso um setTimeout para assíncrono chamada).

Infelizmente, o mesmo não é verdade para o método zoomIn, que apenas salta para o nível de zoom alvo sem a animação de escala para cada nível de zoom. Eu não tentei definir explicitamente a versão para o google maps código, então isso pode ser algo que é fixo em versões posteriores. Enfim, aqui é o código de exemplo que é na maior parte apenas javascript salto aro e não tanto com o Google API do Google Maps:

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

Como essa abordagem parece um pouco confiáveis, eu acho que faria mais sentido para fazer o processamento assíncrono para setZoom explicitamente (O mesmo que o material panning).

EDIT2:

Então eu faço o async zoom explicitamente agora (usando setTimeout com um único zoom de cada vez). Eu também tenho a eventos fogo quando cada zoom acontece para que meus eventos da cadeia corretamente. Parece que os eventos zoomEnd e panEnd estão sendo chamados de forma síncrona.

Configuração enableContinuousZoom no mapa não parece trabalho, então eu acho que chamar zoomOut, zoomIn com o param é a única maneira de conseguir que ao trabalho.

Answer 2

Aqui está a minha abordagem.

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 o zoom este trabalhou para mim muito bem:

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