基于Google Maps API实现选中标记时的定点缩放需求问询

嘿，我刚好对Google Maps API的这类交互很熟悉，给你分享个完全原生的解决方案，完美匹配你的需求~

你想要的核心效果是：选中标记时，点击缩放按钮让地图以该标记的屏幕位置为基准缩放（和滚轮缩放时光标位置的效果一致），而非直接把标记居中。其实Google Maps API自带的Projection对象就能帮我们实现这个需求，不用自己手动计算复杂的bounds偏移。

具体实现步骤（原生API版） #

我们可以通过「地理坐标→屏幕像素坐标→缩放→像素坐标转回地理坐标」的流程，让标记在缩放过程中保持在屏幕原位置：

1. 先封装一个通用的缩放函数，支持放大/缩小：

function zoomAtMarker(marker, zoomIn = true) {
  // 确保地图完全加载，能获取到投影对象（getProjection需要地图初始化完成后才能用）
  if (!map.getProjection()) {
    map.addListenerOnce('idle', () => zoomAtMarker(marker, zoomIn));
    return;
  }

  // 获取选中标记的地理坐标
  const markerPos = marker.getPosition();
  // 获取地图投影，用来做坐标转换
  const projection = map.getProjection();
  // 把标记的地理坐标转换成当前缩放级别下的屏幕像素坐标
  const pixelPos = projection.fromLatLngToPoint(markerPos);
  
  // 计算新的缩放级别
  const newZoom = zoomIn ? map.getZoom() + 1 : map.getZoom() - 1;
  // 执行缩放操作，可选添加动画让过渡更流畅
  map.setZoom(newZoom, { animate: true });

  // 监听缩放完成事件，调整地图中心，让标记保持在原屏幕位置
  map.addListenerOnce('zoom_changed', () => {
    const newCenter = projection.fromPointToLatLng(pixelPos);
    map.setCenter(newCenter);
  });
}

2. 给你的缩放按钮绑定点击逻辑：

// 假设你的放大按钮id是zoom-in-btn，缩小是zoom-out-btn
document.getElementById('zoom-in-btn').addEventListener('click', () => {
  const selectedMarker = getSelectedMarker(); // 这里替换成你自己获取选中标记的逻辑
  if (selectedMarker) {
    zoomAtMarker(selectedMarker, true);
  } else {
    // 没有选中标记时，保持默认的中心缩放逻辑
    map.setZoom(map.getZoom() + 1);
  }
});

document.getElementById('zoom-out-btn').addEventListener('click', () => {
  const selectedMarker = getSelectedMarker();
  if (selectedMarker) {
    zoomAtMarker(selectedMarker, false);
  } else {
    map.setZoom(map.getZoom() - 1);
  }
});

为什么这个方案更优？ #

完全基于Google Maps API的原生对象（Projection、setZoom、setCenter）实现，不需要自己手动计算lat/lng的偏移值，逻辑更清晰，也能更好地兼容API的版本更新。缩放过程中标记会稳稳地保持在你点击缩放前的屏幕位置，和滚轮缩放的体验完全一致。

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