React Leaflet Popup弹窗无法完全适配屏幕如何解决

• 自定义CSS中给.leaflet-popup-content-wrapper设置了固定值width: 600px，弹窗宽度被锁死无法自适应
• Popup组件的maxWidth属性仅支持数值类型入参，传入字符串"100%"属于无效配置，不会生效
• 地图外层容器.leaflet-map未设置明确高度，子元素设置百分比高度时无有效参照基准
• Popup默认采用绝对定位，直接设置百分比宽度时参照基准为视口而非地图容器，无法直接通过CSS百分比值绑定父容器尺寸

1. 调整基础样式 #

删除弹窗固定宽度配置，给地图容器设置明确尺寸基准，修正默认样式冲突：

/* 地图外层容器设置明确高度，作为内部元素尺寸参照，可根据布局需求调整数值 */
.leaflet-map {
  height: 500px;
  width: 100%;
}
.leaflet-container {
  height: 100%;
  width: 100%;
}
.leaflet-popup-content-wrapper {
  max-width: 90%; /* 限制弹窗最大宽度，避免超出地图边界 */
}
.leaflet-popup-content {
  width: auto !important; /* 覆盖Leaflet默认写死的固定宽度 */
  margin: 16px;
}
/* 修正DevExpress图表容器宽度，避免渲染时尺寸计算异常 */
.dx-visibility-change-handler {
  width: 100% !important;
  min-height: 300px; /* 按图表展示需求设置最小高度 */
}

2. 修正Popup组件配置 #

移除无效的属性值，传入合法的数值类型尺寸参数：

{/* 原有Marker逻辑保持不变，仅修改Popup属性 */}
<Popup maxWidth={600} minWidth={280}>
  {atm.name}
  <br />
  {atm.id}
  <LineChart
    dataSource={atm.info1}
    argumentField="country"
    subtitle="line Chart"
    title="Line Chart Title"
  />
</Popup>

3. 绑定动态尺寸逻辑（需严格适配地图容器时使用） #

如果需要弹窗宽度随地图容器尺寸动态变化（例如始终占地图宽度的80%），通过Leaflet事件监听在弹窗打开时动态计算尺寸即可，参考实现如下：

import React, { useRef } from 'react';
import Leaflet from 'leaflet';
import { MapContainer, TileLayer, Marker, Popup, useMapEvents } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

import { MapWithPopupdata } from './fakeData';
import { Container } from 'reactstrap';
import LineChart from 'components/Charts/Line/LineChart';

Leaflet.Icon.Default.imagePath = '../node_modules/leaflet';
delete Leaflet.Icon.Default.prototype._getIconUrl;
Leaflet.Icon.Default.mergeOptions({
  iconUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png',
  shadowUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-shadow.png',
});

const MapWithPopup = () => {
  const mapRef = useRef(null);

  // 监听弹窗打开事件，动态适配地图宽度
  const PopupSizeController = () => {
    useMapEvents({
      popupopen(e) {
        const containerWidth = mapRef.current?.getContainer().offsetWidth;
        if (containerWidth) {
          // 弹窗宽度设为地图容器宽度的80%，可根据需求调整比例
          e.popup.options.maxWidth = containerWidth * 0.8;
          e.popup.update();
        }
      }
    })
    return null;
  }

  return (
    <MapContainer
      ref={mapRef}
      center={[41.00824, 28.978359]}
      zoom={8}
      scrollWheelZoom={false}
    >
      <PopupSizeController />
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      {MapWithPopupdata.data?.map((atm: any, index) => {
        return (
          <Marker key={index} position={[atm.latitude, atm.longitude]}>
            <Popup maxWidth={600} minWidth={280}>
              {atm.name}
              <br />
              {atm.id}
              <LineChart
                dataSource={atm.info1}
                argumentField="country"
                subtitle="line Chart"
                title="Line Chart Title"
              />
            </Popup>
          </Marker>
        );
      })}
    </MapContainer>
  );
};

export default MapWithPopup;

4. 图表渲染异常处理 #

Popup默认懒加载，首次打开时DevExpress图表可能因容器宽度未计算完成出现尺寸错位，在弹窗打开后手动调用图表的render()方法触发重绘，或给图表组件绑定与弹窗状态关联的key强制重新渲染即可解决。

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