谷歌地圖zoomOut-Pan-zoomIn動畫

Question

我想知道如何使用Google Maps API平滑放大動畫。

我有2點，一個在中國，一個在法國。當我放大中國時，點擊法國按鈕。我希望它逐漸縮小平滑的縮放級別。縮小時，它應該平移到新的位置，然後在一個縮放級別放大新的位置。

我該怎麼做？

Answer 1

您需要使用連續縮放參數設置的zoomOut方法進行縮放，並使用panTo方法平滑移動到新的中心點。

您可以收聽到地圖對象上的zoomEnd和moveEnd事件鏈在一起的zoomOut，panTo和zoomIn方法。

編輯：

所以在執行這個問題的樣本的過程中，我發現doContinuousZoom PARAM上ZoomIn和ZoomOut（或只是EnableContinuousZoom在地圖上）並沒有如預期那麼回事。當縮小時，如果圖塊在緩存中（這是一個重要的觀點，如果圖塊沒有被緩存，那麼它實際上不可能獲得您之後的平滑動畫）時，它可以正常工作，瓷磚模擬平滑的縮放動畫，並在每個縮放步驟上引入〜500 ms的延遲，因此您可以異步執行此操作（不像panTo，您將在我的示例中看到我使用setTimeout調用異步）。

不幸的是zoomIn方法也是這樣，它只是跳到目標縮放級別，沒有每個縮放級別的縮放動畫。我沒有嘗試明確設置谷歌地圖代碼的版本，所以這可能是在更高版本中修復的問題。總之，這裏是sample code這是大多隻是JavaScript的箍跳躍和與其說與谷歌地圖API：

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

因爲這種做法似乎有點不可靠，我認爲它會更有意義做顯式地setZoom的異步處理（與平移的東西相同）。

EDIT2：

所以我做異步現在明確地縮放（使用setTimeout一次與一個單一的變焦）。我還必須在每次縮放發生時觸發事件，以便我的事件正確鏈接。看起來像是同時調用了zoomEnd和panEnd事件。

在地圖上設置enableContinuousZoom似乎不起作用，所以我想調用zoomOut，zoomIn與param是唯一能讓它工作的方法。

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