web-dev-qa-db-fra.com

Animation de Google Maps zoomOut-Pan-zoomIn

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 de zoom à 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 ceci?

javascriptgoogle-mapssettimeout
18
Sindre Sorhus

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

Vous pouvez écouter les événements zoomEnd et moveEnd de la carte pour enchaîner vos méthodes zoomOut, panTo et zoomIn.

MODIFIER:

Ainsi, lors de l'implémentation d'un exemple pour ce problème, j'ai découvert que les paramètres doContinuousZoom sur ZoomIn et ZoomOut (ou tout simplement EnableContinuousZoom sur la carte) ne fonctionnaient 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 la bonne animation que vous recherchez), puis il effectue une bonne mise à l’échelle sur les mosaïques simulent une animation de zoom fluide et introduisent un retard 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 l’échantillon exemple de code qui consiste principalement en javascript hoop jumping et pas tellement avec l’API de Google 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:

Donc, je fais 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 param est le seul moyen de le faire fonctionner.

16
RedBlueThing

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
3
Erevald
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);
    }
}
3
tetris11

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);
    }
}
0
Igor Mukhin