Google Maps zoomOut-Pan-zoomIn анимация

Ответ 1

Вам нужен метод zoomOut с параметром непрерывного масштабирования, установленным для увеличения и panTo, чтобы сделать плавное панорамирование новой центральной точки.

Вы можете слушать zoomEnd и moveEnd события на объекте карты, чтобы объединить ваши методы zoomOut, panTo и zoomIn.

EDIT:

Итак, в ходе реализации образца для этой проблемы я обнаружил, что параметр doContinuousZoom на zoomIn и zoomOut (или просто EnableContinuousZoom на карте) работает не так, как ожидалось. Он работает нормально при масштабировании, если плитки находятся в кеше (это важный момент, если плитки не кэшированы, то на самом деле невозможно получить гладкую анимацию, после которой вы после этого), то она делает небольшое масштабирование на плитки для имитации плавной анимации масштабирования и вводят задержку ~ 500 мс на каждом шаге масштабирования, поэтому вы можете сделать это асинхронно (в отличие от panTo, который вы увидите в моем примере, я использую setTimeout для вызова async).

К сожалению, это не так для метода zoomIn, который просто переходит к целевому уровню масштабирования без масштабирования анимации для каждого уровня масштабирования. Я не пробовал явно устанавливать версию для кода Google Maps, поэтому это может быть что-то, что исправлено в более поздних версиях. Во всяком случае, вот пример пример кода, который в основном представляет собой только javascript-обруч и не столько с API Карт Google:

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

Поскольку этот подход кажется немного ненадежным, я думаю, что было бы целесообразнее сделать асинхронную обработку для setZoom явно (так же, как и материал панорамирования).

EDIT2:

Итак, я теперь явно увеличиваю масштаб асинхронизации (используя setTimeout с одним увеличением за раз). Я также должен запускать события, когда каждый масштаб происходит так, что мои события цепочки правильно. Кажется, что события zoomEnd и panEnd вызываются синхронно.

Настройка enableContinuousZoom на карте, похоже, не работает, поэтому я предполагаю, что вызов zoomOut, zoomIn с параметром - единственный способ заставить это работать.

Ответ 2

Здесь мой подход.

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

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

Ответ 4

Для увеличения это работало для меня красиво:

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