我想知道如何使用 Google Maps API 平滑地放大动画。
我有两分,一分在中国,一分在法国。当我放大中国时,点击法国按钮。我希望它逐渐平滑缩小,一次缩放一个级别。当它被缩小时,它应该平移到新位置,然后在新位置上放大一个缩放级别。
我怎样才能做到这一点?
我想知道如何使用 Google Maps API 平滑地放大动画。
我有两分,一分在中国,一分在法国。当我放大中国时,点击法国按钮。我希望它逐渐平滑缩小,一次缩放一个级别。当它被缩小时,它应该平移到新位置,然后在新位置上放大一个缩放级别。
我怎样才能做到这一点?
您需要zoomOut
设置连续缩放参数的panTo
方法来进行缩放和平滑平移到新中心点的方法。
您可以收听地图对象上的zoomEnd
和事件,以将您的,和方法moveEnd
链接在一起。zoomOut
panTo
zoomIn
编辑:
因此,在针对此问题实施示例的过程中,我发现and (或仅在地图上)上的doContinuousZoom
参数并没有按预期工作。缩小时它可以正常工作,如果图块在缓存中(这是重要的一点,如果图块没有被缓存,那么它就不可能获得你想要的平滑动画)然后它会做一些很好的缩放用于模拟平滑缩放动画的图块,并在每个缩放步骤中引入约 500 毫秒的延迟,因此您可以异步执行(与在我的示例中看到的不同,我使用 setTimeout 来调用异步)。 ZoomIn
ZoomOut
EnableContinuousZoom
panTo
不幸的是,该方法并非如此zoomIn
,它只是跳转到目标缩放级别,而没有每个缩放级别的缩放动画。我没有尝试明确设置谷歌地图代码的版本,所以这可能是在以后的版本中修复的问题。无论如何,这里的示例代码主要是 javascript 箍跳,而不是 Google Maps API:
http://www.cannonade.net/geo.php?test=geo2
因为这种方法似乎有点不可靠,所以我认为显式地对 setZoom 进行异步处理会更有意义(与平移的东西相同)。
编辑2:
所以我现在明确地进行异步缩放(一次使用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);
}
}