google-map-react组件onClick事件返回lat、lng坐标值异常问题

该问题是google-map-react 2.x版本内部计算点击坐标时，依赖容器相对于视口的偏移值计算逻辑存在兼容性缺陷，当地图容器的父元素存在非static定位、CSS transform变换、或者容器有padding/margin未被正确识别时，就会出现固定像素偏移的情况，缩放等级越低坐标偏差越大。
以下解决方案全部基于包本身配置实现，无需调用原生Google Maps API：

• 方案1：修复容器样式配置
  首先确保地图外层容器满足以下要求：
  • 给容器设置明确的width、height属性，不要用百分比自适应导致容器尺寸计算延迟
  • 容器自身不要设置transform、margin、padding属性，相关样式可以移到容器的外层父元素上
  • 容器的所有父节点不要使用position: fixed/sticky或者transform变换，如果必须用，给地图容器添加style={{ position: 'relative' }}属性
• 方案2：使用组件内置的offset属性手动修正
  2.1.3版本的GoogleMapReact组件支持传入offset属性来校正坐标计算的偏移量，你可以先通过开发工具测量出固定的x、y像素偏移值，直接传入即可：

  import GoogleMapReact from 'google-map-react';
  
  const Map = () => {
    // 替换为你实际测量的x、y偏移值，单位为像素
    const mapOffset = {
      x: -12, // 水平偏移，负数值表示向左修正
      y: -8 // 垂直偏移，负数值表示向上修正
    }
  
    return (
      <div style={{ width: '100vw', height: '80vh' }}>
        <GoogleMapReact
          bootstrapURLKeys={{ key: '你的API密钥' }}
          defaultCenter={{ lat: 39.9, lng: 116.4 }}
          defaultZoom={10}
          offset={mapOffset}
          onClick={({ lat, lng }) => console.log('修正后坐标', lat, lng)}
        >
          {/* 你的自定义地图组件 */}
        </GoogleMapReact>
      </div>
    )
  }
  

• 方案3：开启resetBoundsOnResize属性自动校正
  当偏移值会随页面滚动、窗口尺寸变化时，开启组件内置的resetBoundsOnResize属性即可自动重新计算容器偏移值，校正坐标误差：

  <GoogleMapReact
    bootstrapURLKeys={{ key: '你的API密钥' }}
    defaultCenter={{ lat: 39.9, lng: 116.4 }}
    defaultZoom={10}
    resetBoundsOnResize={true}
    onClick={({ lat, lng }) => console.log('校正后坐标', lat, lng)}
  />
  

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