为body设置CSS zoom导致Google Maps latLng偏移问题

在Web应用中使用@vis.gl/react-google-maps时，为适配小屏幕给body元素添加了CSS zoom属性，UI缩放效果正常，但Google Maps交互出现异常：地图点击事件（onClick）和多边形绘制工具返回的latLng值与实际点击位置不匹配，偏差极大。

示例CSS代码：

body {
  zoom: 0.65;
}

地图组件代码：

import { APIProvider, Map } from '@vis.gl/react-google-maps';

const MyMap = () => {
  const handleMapClick = (e: google.maps.MapMouseEvent) => {
    if (!e.detail.latLng) return;

    const { lat, lng } = e.detail.latLng;
    console.log('Lat:', lat(), 'Lng:', lng());
  };

  return (
    <APIProvider apiKey={process.env.VITE_GOOGLE_MAPS_API_KEY}>
      <Map
        onClick={handleMapClick}
        style={{ width: '100vw', height: '100vh' }}
        defaultZoom={5}
        defaultCenter={{ lat: 40.7128, lng: -74.006 }}
      />
    </APIProvider>
  );
};

export default MyMap;

已尝试的方法：

• 将地图包裹在未缩放的容器中——无效
• 根据CSS缩放级别直接调整lat和lng值——未修复偏移

核心问题：

1. 为body或父元素设置CSS zoom时，能否修复Google Maps的事件投影？
2. 能否根据缩放级别计算校正后的latLng？

可行解决方案 #

1. 替换CSS zoom为transform: scale（首选） #

CSS zoom是非标准属性，会干扰Google Maps内部的坐标计算逻辑，改用transform: scale配合transform-origin: top left可避免该问题，同时保持UI缩放效果：

body {
  transform: scale(0.65);
  transform-origin: top left;
  /* 抵消缩放导致的容器尺寸收缩，确保占满视口 */
  width: calc(100% / 0.65);
  height: calc(100% / 0.65);
  overflow: hidden;
}

这种方式不会破坏Google Maps的事件坐标映射，交互和坐标返回都会恢复正常。

2. 手动校正latLng坐标 #

若必须使用zoom属性，可通过以下步骤校正点击坐标：

• 获取当前body的zoom值（可动态读取）
• 将点击事件的屏幕坐标转换为地图容器内的相对坐标
• 利用Google Maps的API方法反向计算校正后的经纬度

示例代码：

import { APIProvider, Map, useMap } from '@vis.gl/react-google-maps';

const MapClickHandler = () => {
  const map = useMap();
  // 动态获取当前body的zoom值
  const getZoomLevel = () => parseFloat(getComputedStyle(document.body).zoom) || 1;

  const handleMapClick = (e: google.maps.MapMouseEvent) => {
    if (!map || !e.detail.latLng) return;

    const zoomLevel = getZoomLevel();
    // 还原被zoom缩放的屏幕坐标
    const screenX = e.domEvent.clientX / zoomLevel;
    const screenY = e.domEvent.clientY / zoomLevel;

    // 计算点击位置相对于地图容器的坐标
    const mapContainer = map.getDiv();
    const rect = mapContainer.getBoundingClientRect();
    const divX = screenX - rect.left;
    const divY = screenY - rect.top;

    // 转换为校正后的经纬度
    const correctedLatLng = map.fromDivPixelToLatLng(new google.maps.Point(divX, divY));
    console.log('Corrected Lat:', correctedLatLng.lat(), 'Corrected Lng:', correctedLatLng.lng());
  };

  return <Map onClick={handleMapClick} style={{ width: '100vw', height: '100vh' }} defaultZoom={5} defaultCenter={{ lat: 40.7128, lng: -74.006 }} />;
};

const MyMap = () => {
  return (
    <APIProvider apiKey={process.env.VITE_GOOGLE_MAPS_API_KEY}>
      <MapClickHandler />
    </APIProvider>
  );
};

export default MyMap;

3. 调整Google Maps自身参数适配小屏幕 #

放弃全局CSS缩放，改为调整地图容器尺寸和地图自身的zoom属性：

• 根据目标缩放比例，设置地图容器的width和height
• 同步调整地图的zoom值，确保地图内容显示比例适配屏幕

这种方法完全避免了全局缩放带来的冲突，但需要根据屏幕尺寸动态计算地图参数，适合对地图精度要求较高的场景。

内容的提问来源于stack exchange，提问作者El-habib Amazzal