ReactJs中使用ReactMapGL组件出现页面布局无响应如何解决

问题根因 #

你当前布局错乱的核心原因是给ReactMapGL的viewport配置了固定的100vw宽度和100vh高度：

• 100vw是整个浏览器视口的宽度，会包含滚动条的宽度，小屏幕下容易出现横向溢出
• 100vh是整个浏览器视口的高度，没有扣除导航栏、页脚的占用高度，会导致地图内容被挤出可视区域
• 硬编码的宽高值不会随父容器尺寸自动适配，屏幕缩放后就会出现布局错乱

异常效果参考：

修复步骤 #

1. 调整全局页面布局 #

首先给整个页面的容器设置flex布局，让地图区域自动撑满导航和页脚之外的剩余空间：

/* 全局页面容器 */
.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}
/* 导航栏 */
.nav-bar {
  height: 60px; /* 替换为你的导航栏实际高度 */
  flex-shrink: 0;
}
/* 地图外层容器 */
.map-wrapper {
  flex: 1;
  width: 100%;
  /* 如果导航/页脚是fixed固定定位，需要加对应的padding：
  padding-top: 60px;
  padding-bottom: 50px; 替换为你的页脚实际高度 */
}
/* 页脚 */
.footer {
  height: 50px; /* 替换为你的页脚实际高度 */
  flex-shrink: 0;
}

2. 修改Map组件代码 #

将viewport中的硬编码vw/vh改为百分比适配，同时给包裹ReactMapGL的外层div设置宽高100%：

import { useState, useEffect } from 'react';
import ReactMapGL, { Marker, Popup } from 'react-map-gl';

export default function Map({posts}) {
    const [viewport, setViewport] = useState({
        latitude: 45.4211,
        longitude: -75.6938,
        width:"100%",
        height:"100%",
        zoom: 10,
    });

    const [selectedProperty, setSelectedProperty] = useState(null);

    // 监听窗口变化，同步更新地图尺寸（可选，适配极端缩放场景）
    useEffect(() => {
        const handleResize = () => {
            setViewport(prev => ({...prev}));
        };
        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);

    return (
      <div style={{width: '100%', height: '100%'}}>
        <ReactMapGL {...viewport} 
        mapboxApiAccessToken="你的mapbox token"
        mapStyle="mapbox://styles/jay/cks5xkaa892cp17o5hyxcuu0z"
        onViewportChange={newViewport => setViewport(newViewport)}>
        {
          posts?.map((maps) => (
            <Marker key={maps.id} latitude={maps.Latitude} longitude={maps.Longitude}>
                <button className="marker-btn" onClick={e => {
                    e.preventDefault();
                    setSelectedProperty(maps);
                }}>
                    <img src="placeholder.svg" alt="标记点"/>
                </button>
            </Marker>
          ))}

          {selectedProperty && (
              <Popup latitude={selectedProperty.Latitude} longitude={selectedProperty.Longitude} 
              onClose={() => setSelectedProperty(null)}>
                <h1>{selectedProperty.Title}</h1>
              </Popup>
          )}
        </ReactMapGL> 
      </div>
    );
}

注意事项 #

• 如果你使用的是react-map-gl v7及以上版本，不需要手动在state中管理width和height，直接给Map组件的父容器设置宽高即可，组件会自动适配尺寸
• 不要给地图相关容器设置固定宽高，全部用百分比或者flex自适应属性
• 如果导航栏/页脚使用了position: fixed固定定位，一定要给地图容器加对应高度的padding，避免地图内容被遮挡

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