Карты Google zoomOut-Pan-zoomIn анимация

Question

Мне интересно, как получить плавное увеличение анимации с помощью API Карт Google.

У меня 2 очка, один, скажем, в Китае, и один во Франции. Когда я увеличу масштаб Китая, я нажму кнопку «Франция». Я хочу, чтобы он постепенно уменьшал масштаб, один уровень масштабирования за раз. Когда оно уменьшено, оно должно переместиться на новое место, а затем увеличить новое местоположение на один уровень увеличения за раз.

Как я могу это сделать?

Answer 1

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

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

EDIT:

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

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

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

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

EDIT2:

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

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

Answer 2

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 3

Вот мой подход.

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