如何让React集成的Google Map弹窗完全可见？

当前实现 #

• 在React中使用@react-google-maps/api渲染标记点和弹窗div。
• 基于OverlayView实现地图标记点。
• 点击标记点时展示对应信息弹窗。
• 弹窗采用ChakraUI的Box组件，可替换为其他组件不影响功能。

需求 #

确保弹窗始终完全可见，不会因处于地图边界位置而被截断。

可接受的解决方案 #

• 移动地图，让信息窗口完全进入视口；
• 动态调整信息窗口的位置，使其完全可见。

现有代码 #

return (
  <>
    <OverlayView position={props.position} mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}>
      <Box>
        <Card                      
          id={`marker-${props.markerIndex}`}
          border={'1px solid rgb(221, 222, 224)'}
          borderRadius={'24px'} 
          width={'max-content'}  
          onClick={props.onClick}  
          color={ (props.isSelected || props.isHoveringResult) ? 'white': 'black' }     
          backgroundColor={ (props.isSelected  || props.isHoveringResult) ? 'black': 'white' }>
          <CardBody padding={'8px'} textAlign={'center'}> 
            <Text fontSize={'14px'} fontWeight={'bold'}>
              {priceStr}
            </Text>
          </CardBody>
        </Card>

        {/* Desktop display item sticks to map and moves. */}
        { props.isSelected && 
          <Box 
            id={`markerPopup-${props.markerIndex}`}
            onClick={(event) => {
              event.stopImmediatePropagation();
            }}
            width={{ base: '100%', sm: '400px'}}
            position={'relative'} marginTop={'16px'}
            zIndex={'tooltip'}>
            <HotelSearchResultDisplayMapItem />
            <Box pos={'absolute'} right="8px" top="8px" cursor={'pointer'}>
              <FontAwesomeIcon             
              icon={solidCircleXMark} 
              size='3x'
              color='white'
              />
            </Box>         
          </Box>
        }        
      </Box>
    </OverlayView>
  </>
);

当前问题效果 #

标记点位置偏下时，弹窗被地图底部截断：

解决方案 #

方案一：动态调整弹窗位置（切换上下显示） #

通过计算弹窗和地图视口的位置关系，自动将弹窗移到标记点上方或保持原位置，避免被截断。

1. 给弹窗添加ref用于获取DOM元素；
2. 传入Google Map实例到组件中；
3. 在弹窗显示时计算位置，动态调整marginTop。

修改后的代码：

import { useRef, useEffect } from 'react';

const MarkerWithPopup = (props) => {
  const popupRef = useRef(null);
  const { map } = props; // 从父组件传入map实例

  useEffect(() => {
    if (!props.isSelected || !map || !popupRef.current) return;

    const mapDiv = map.getDiv();
    const mapRect = mapDiv.getBoundingClientRect();
    const popupRect = popupRef.current.getBoundingClientRect();
    // 获取标记点的屏幕坐标
    const markerPoint = map.getProjection().fromLatLngToPoint(props.position);
    const scale = Math.pow(2, map.getZoom());
    const markerY = markerPoint.y * scale;

    // 判断弹窗是否超出地图底部
    const popupBottom = markerY + popupRect.height + 16; // 16为原marginTop
    if (popupBottom > mapRect.height) {
      // 将弹窗移到标记点上方
      popupRef.current.style.marginTop = `-${popupRect.height + 16}px`;
    } else {
      // 恢复原位置
      popupRef.current.style.marginTop = '16px';
    }
  }, [props.isSelected, map, props.position]);

  return (
    <>
      <OverlayView position={props.position} mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}>
        <Box>
          <Card                      
            id={`marker-${props.markerIndex}`}
            border={'1px solid rgb(221, 222, 224)'}
            borderRadius={'24px'} 
            width={'max-content'}  
            onClick={props.onClick}  
            color={ (props.isSelected || props.isHoveringResult) ? 'white': 'black' }     
            backgroundColor={ (props.isSelected  || props.isHoveringResult) ? 'black': 'white' }>
            <CardBody padding={'8px'} textAlign={'center'}> 
              <Text fontSize={'14px'} fontWeight={'bold'}>
                {priceStr}
              </Text>
            </CardBody>
          </Card>

          {/* Desktop display item sticks to map and moves. */}
          { props.isSelected && 
            <Box 
              ref={popupRef}
              id={`markerPopup-${props.markerIndex}`}
              onClick={(event) => {
                event.stopImmediatePropagation();
              }}
              width={{ base: '100%', sm: '400px'}}
              position={'relative'} marginTop={'16px'}
              zIndex={'tooltip'}>
              <HotelSearchResultDisplayMapItem />
              <Box pos={'absolute'} right="8px" top="8px" cursor={'pointer'}>
                <FontAwesomeIcon             
                  icon={solidCircleXMark} 
                  size='3x'
                  color='white'
                />
              </Box>         
            </Box>
          }        
        </Box>
      </OverlayView>
    </>
  );
};

方案二：移动地图使弹窗完全可见 #

利用Google Maps的panBy方法，调整地图位置让弹窗完全进入视口。

代码示例：

import { useRef, useEffect } from 'react';

const MarkerWithPopup = (props) => {
  const popupRef = useRef(null);
  const { map } = props;

  useEffect(() => {
    if (!props.isSelected || !map || !popupRef.current) return;

    const popupRect = popupRef.current.getBoundingClientRect();
    const mapRect = map.getDiv().getBoundingClientRect();
    let offsetX = 0;
    let offsetY = 0;

    // 处理底部溢出
    if (popupRect.bottom > mapRect.bottom) {
      offsetY = popupRect.bottom - mapRect.bottom + 20; // 加20px留白
    }
    // 处理右侧溢出
    if (popupRect.right > mapRect.right) {
      offsetX = popupRect.right - mapRect.right + 20;
    }
    // 处理左侧溢出
    if (popupRect.left < mapRect.left) {
      offsetX = popupRect.left - mapRect.left - 20;
    }

    if (offsetX !== 0 || offsetY !== 0) {
      map.panBy(-offsetX, -offsetY);
    }
  }, [props.isSelected, map]);

  // 其余代码同原组件...
};

注意事项 #

• 确保父组件能正确传递Google Map实例：在GoogleMap组件的onLoad回调中获取map，再传给Marker组件；
• 若弹窗宽度较大，可在方案一中补充处理左右溢出的逻辑，调整弹窗的水平偏移。

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