Animation de zoom sur Google Maps

Question

Je me demande comment obtenir un zoom fluide dans l'animation avec l'API Google Maps.

J'ai 2 points, un en Chine et un en France. Lorsque je fais un zoom sur la Chine, cliquez sur le bouton France. Je veux qu’il fasse un zoom arrière graduel, un niveau à la fois Lorsque vous effectuez un zoom arrière, effectuez un panoramique vers le nouvel emplacement, puis effectuez un zoom avant sur le nouvel emplacement avec un niveau de zoom à la fois.

Comment puis-je faire cela?

Answer 1

Vous avez besoin du zoomOut avec le paramètre de zoom continu défini pour effectuer le zoom et le panTo pour effectuer un panoramique progressif vers le nouveau point central.

Vous pouvez écouter le zoomEnd et moveEnd événements sur l’objet carte pour enchaîner vos méthodes zoomOut , panTo et zoomIn .

EDIT:

Ainsi, au cours de l'implémentation d'un exemple pour ce problème, j'ai découvert que le paramètre doContinuousZoom sur ZoomIn et ZoomOut (ou tout simplement < code> EnableContinuousZoom sur la carte) ne fonctionne pas comme prévu. Cela fonctionne bien lors du zoom arrière, si les tuiles sont dans le cache (c’est un point important; si les tuiles ne sont pas mises en cache, il n’est pas vraiment possible d’obtenir une animation fluide que vous recherchez), puis une bonne mise à l’échelle les mosaïques simulent une animation de zoom fluide et introduisent un délai de 500 ms environ à chaque étape du zoom afin que vous puissiez le faire de manière asynchrone (contrairement à panTo , que vous verrez dans mon exemple, j'utilise un setTimeout pour appeler async ).

Malheureusement, il n'en va pas de même pour la méthode zoomIn , qui saute simplement au niveau de zoom cible sans l'animation de mise à l'échelle pour chaque niveau de zoom. Je n'ai pas essayé explicitement de définir la version pour le code de google maps. Ce problème pourrait donc être résolu dans les versions ultérieures. Quoi qu’il en soit, voici le exemple de code , qui consiste principalement en javascript cerceau et pas tant avec Google. API Maps:

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

Parce que cette approche semble un peu peu fiable, je pense qu’il serait plus logique de faire le traitement asynchrone explicitement pour setZoom (comme pour le panoramique).

EDIT2:

Je fais donc le zoom async explicitement maintenant (en utilisant setTimeout avec un seul zoom à la fois). Je dois également déclencher des événements lors de chaque zoom pour que les événements soient correctement chaînés. Il semble que les événements zoomEnd et panEnd soient appelés de manière synchrone.

La définition de enableContinuousZoom sur la carte ne semble pas fonctionner. Je suppose donc que d'appeler zoomOut, zoomIn avec le paramètre est le seul moyen de le faire fonctionner.

Answer 2

Voici mon approche.

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

Pour le zoom celui-ci a bien fonctionné pour moi:

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