我想知道如何使用Google Maps API实现平滑的缩放动画。
我有两个点,一个在中国,另一个在法国。当我正在查看中国并单击法国按钮时,我希望它逐渐平滑地缩小一个缩放级别。当缩小时,它应该移动到新位置,然后再以一个缩放级别为单位放大到新位置。
我该如何做到这一点?
我想知道如何使用Google Maps API实现平滑的缩放动画。
我有两个点,一个在中国,另一个在法国。当我正在查看中国并单击法国按钮时,我希望它逐渐平滑地缩小一个缩放级别。当缩小时,它应该移动到新位置,然后再以一个缩放级别为单位放大到新位置。
我该如何做到这一点?
您需要使用带有连续缩放参数的 zoomOut
方法来进行缩放,使用 panTo
方法来实现平滑移动到新的中心点。
您可以在地图对象上监听 zoomEnd
和 moveEnd
事件,以链接您的 zoomOut
、panTo
和 zoomIn
方法。
编辑:
因此,在实现此问题的示例过程中,我发现 ZoomIn
和 ZoomOut
上的 doContinuousZoom
参数(或者地图上的 EnableContinuousZoom
)并没有像预期那样完全起作用。当缩小时,如果瓷砖已经被缓存(这是一个重要的点,如果瓷砖没有被缓存,则不可能获得您所期望的平滑动画效果),则它会对瓷砖进行一些不错的缩放,以模拟平滑的缩放动画,并在每个缩放步骤上引入约500毫秒的延迟,以便您可以异步执行它(与 panTo
不同,在我的示例中,我使用 setTimeout 调用异步方法)。
不幸的是,对于zoomIn
方法来说情况并非如此,它只会直接跳到目标缩放级别而没有每个缩放级别的缩放动画。 我尚未尝试显式设置google地图代码的版本,因此这可能是在后续版本中修复的问题。 无论如何,这里是示例代码,它主要只是一些JavaScript技巧,而不是使用Google Maps API:
http://www.cannonade.net/geo.php?test=geo2
因为这种方法似乎有点不可靠,所以我认为明确地进行setZoom的异步处理会更有意义(与平移操作一样)。 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);
}
}