Мне интересно, как я получаю плавное увеличение анимации с помощью API Карт Google.
У меня есть 2 очка, один из них, скажем, Китай и один во Франции. Когда я увеличусь по Китаю и нажмите кнопку Франция. Я хочу, чтобы он постепенно уменьшал ровность, один уровень масштабирования в то время. Когда он уменьшится, он должен переместиться в новое место, а затем увеличить в новом местоположении один уровень масштабирования в то время.
Как я могу это сделать?
Вам нужен метод 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 с параметром - единственный способ заставить это работать.
Здесь мой подход.
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
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);
}
}
Для увеличения это работало для меня красиво:
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);
}
}