Google Maps zoomOut-Pan-zoomIn hoạt ảnh

Question

Tôi tự hỏi làm thế nào tôi có được sự phóng to mượt mà trong hoạt ảnh với API Google Maps.

Tôi có 2 điểm, một điểm, giả sử Trung Quốc và một ở Pháp. Khi tôi phóng to ở Trung Quốc, và bấm vào nút France. Tôi muốn nó dần dần thu nhỏ mịn, một mức thu phóng vào thời điểm đó. Khi thu nhỏ, nó sẽ chuyển sang vị trí mới, sau đó phóng to ở vị trí mới một mức thu phóng tại thời điểm đó.

Làm thế nào tôi có thể làm điều này?

Answer 1

Bạn cần phương pháp zoomOut với tham số thu phóng liên tục được đặt để thực hiện thu phóng và phương pháp panTo để thực hiện thao tác quét trơn tru đến điểm giữa mới.

Bạn có thể lắng nghe những zoomEnd và moveEnd sự kiện trên đối tượng bản đồ để chuỗi lại với nhau bạn zoomOut, panTo và zoomIn phương pháp.

EDIT:

Vì vậy, trong quá trình thực hiện một mẫu cho vấn đề này, tôi phát hiện ra rằng doContinuousZoom param trên ZoomIn và ZoomOut (hoặc chỉ cần EnableContinuousZoom trên bản đồ) không thực hiện khá công như mong đợi. Nó hoạt động ok khi phóng to, nếu các tile nằm trong cache (đây là một điểm quan trọng, nếu các tile không được lưu trữ thì nó không thực sự có thể có được animation mượt mà mà bạn đang sử dụng). các ô để mô phỏng hoạt ảnh thu phóng mượt mà và giới thiệu độ trễ ~ 500 ms trên mỗi bước thu phóng để bạn có thể làm điều đó một cách không đồng bộ (không giống như panTo, mà bạn sẽ thấy trong ví dụ của tôi, tôi sử dụng setTimeout để gọi async).

Thật không may là điều này cũng không đúng đối với phương pháp zoomIn, chỉ nhảy đến mức thu phóng mục tiêu mà không có hình động thu nhỏ cho từng mức thu phóng. Tôi đã không cố gắng thiết lập rõ ràng phiên bản cho mã bản đồ google, vì vậy đây có thể là một cái gì đó được sửa trong các phiên bản sau. Dù sao, đây là sample code mà hầu như chỉ là javascript hoop nhảy và không quá nhiều với các API của Google Maps:

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

Bởi vì phương pháp này có vẻ hơi không đáng tin cậy, tôi nghĩ rằng nó sẽ có ý nghĩa hơn để làm việc xử lý async cho setZoom một cách rõ ràng (Giống như các công cụ panning).

EDIT2:

Vì vậy, tôi làm async phóng to một cách rõ ràng bây giờ (sử dụng setTimeout với zoom duy nhất tại một thời điểm). Tôi cũng phải kích hoạt các sự kiện khi mỗi lần thu phóng diễn ra để chuỗi sự kiện của tôi chính xác. Có vẻ như các sự kiện zoomEnd và panEnd đang được gọi đồng bộ.

Cài đặt enableContinuousZoom trên bản đồ dường như không hoạt động, vì vậy tôi đoán gọi zoomOut, zoomIn với param là cách duy nhất để làm việc đó.

Answer 2

Đây là cách tiếp cận của tôi.

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

Đối với zoom này làm việc cho tôi độc đáo:

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