Масштабирование Карт Google-Панорамирование-анимация масштабирования

Question

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

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

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

Answer 1

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

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

Редактировать:

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

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

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

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

РЕДАКТИРОВАТЬ 2:

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

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

Answer 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

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

Для увеличения этот мне очень понравился:

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