Next.js中react-map-gl Popup hover无显示问题求助

排查父容器样式冲突 #

• 检查嵌套的Material UI Box组件的样式设置：
  • 若Box添加了overflow: hidden，会直接裁剪超出其范围的Popup，将该属性改为overflow: visible即可。
  • 若Box设置了position: relative，Popup的绝对定位会基于这个容器计算，容易偏移到视口外。要么移除该属性，要么给Popup添加container="body"属性，强制弹窗挂载到页面body节点下。

强制Popup挂载到body #

修改Popup组件，添加container="body"属性，避免父容器样式影响定位：

<Popup
  container="body"
  longitude={hoverInfo?.coordinates[0]}
  latitude={hoverInfo?.coordinates[1]}
  closeButton={false}
  closeOnClick={false}
  onClose={() => setHoverInfo(null)}
  anchor="top"
>
  <div>你的弹窗内容</div>
</Popup>

修正Popup定位样式 #

如果弹窗仍有偏移，手动添加样式强制固定定位：

<Popup
  // 保留原有属性
  style={{ zIndex: 1000, position: 'fixed' }}
>
  {/* 弹窗内容 */}
</Popup>

处理Next.js SSR渲染限制 #

由于react-map-gl依赖浏览器环境，确保地图组件用Next.js的dynamic导入并禁用SSR：

import dynamic from 'next/dynamic';

const MapComponent = dynamic(() => import('./你的地图组件路径'), {
  ssr: false,
  loading: () => <div>地图加载中...</div>
});

验证弹窗渲染条件 #

确认只有当hoverInfo存在时才渲染Popup，避免无效渲染：

{hoverInfo && (
  <Popup
    // 定位及其他属性
  >
    {/* 弹窗内容 */}
  </Popup>
)}

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