如何在Google Maps中实现类似OpenLayers view.animate()的固定时长地图动画？

Google Maps 原生API的panTo()和setZoom()确实不支持直接设置动画时长，但可以通过自定义帧动画实现类似OpenLayers animate()的效果，核心是利用requestAnimationFrame逐步插值更新地图状态，精准控制时长。

固定时长平移动画 #

function animatePanTo(map, targetCenter, durationMs) {
  const startCenter = map.getCenter();
  const startTime = performance.now();

  function step(currentTime) {
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / durationMs, 1);
    // 线性插值，可替换为自定义缓动函数
    const lat = startCenter.lat + (targetCenter.lat - startCenter.lat) * progress;
    const lng = startCenter.lng + (targetCenter.lng - startCenter.lng) * progress;

    map.setCenter(new google.maps.LatLng(lat, lng));

    if (progress < 1) {
      requestAnimationFrame(step);
    }
  }

  requestAnimationFrame(step);
}

// 使用示例：2秒平移到北京坐标
animatePanTo(map, new google.maps.LatLng(39.9042, 116.4074), 2000);

固定时长缩放动画 #

function animateZoomTo(map, targetZoom, durationMs) {
  const startZoom = map.getZoom();
  const startTime = performance.now();

  function step(currentTime) {
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / durationMs, 1);
    const currentZoom = startZoom + (targetZoom - startZoom) * progress;

    map.setZoom(currentZoom);

    if (progress < 1) {
      requestAnimationFrame(step);
    }
  }

  requestAnimationFrame(step);
}

// 使用示例：1.5秒缩放到层级14
animateZoomTo(map, 14, 1500);

组合平移+缩放动画 #

如果需要同时执行平移和缩放，在同一帧更新逻辑里处理两个状态即可：

function animateMap(map, targetCenter, targetZoom, durationMs) {
  const startCenter = map.getCenter();
  const startZoom = map.getZoom();
  const startTime = performance.now();

  function step(currentTime) {
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / durationMs, 1);
    
    const lat = startCenter.lat + (targetCenter.lat - startCenter.lat) * progress;
    const lng = startCenter.lng + (targetCenter.lng - startCenter.lng) * progress;
    const currentZoom = startZoom + (targetZoom - startZoom) * progress;

    map.setCenter(new google.maps.LatLng(lat, lng));
    map.setZoom(currentZoom);

    if (progress < 1) {
      requestAnimationFrame(step);
    }
  }

  requestAnimationFrame(step);
}

// 使用示例：2.5秒平移到上海并缩放到层级16
animateMap(
  map,
  new google.maps.LatLng(31.2304, 121.4737),
  16,
  2500
);

添加缓动效果 #

如果需要类似OpenLayers的easing参数效果，可以自定义缓动函数替换线性插值的progress计算：

// 缓入缓出示例函数
function easeInOutQuad(t) {
  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
}

// 在step函数中使用：
const progress = easeInOutQuad(Math.min(elapsed / durationMs, 1));

内容的提问来源于stack exchange，提问作者BFlat