使地图适合容器 Leaflet 的大小答案

【问题标题】：fit the map to the size of the container Leaflet使地图适合容器 Leaflet 的大小
【发布时间】：2023-01-20 17:20:52
【问题描述】：

我需要你的帮助！我正在使用 Leaflet 创建自定义地图。当前正在渲染卡片，但它不会填充放置卡片的容器。容器的大小是严格设置的，我希望地图尽可能填满容器。所有使用 CSS 调整大小的尝试都失败了。我为我的英语感到抱歉！和平为大家！我会为你附上链接https://codesandbox.io/s/dark-worker-8qbzfr

我的代码

import "./styles.css";
import { MapContainer, ImageOverlay } from "react-leaflet";
import "leaflet/dist/leaflet.css";

const M = ({ width, height, zoom, center }) => {
  const wh = [width, 500];
  const origin = [0, 0];
  const bounds = [origin, wh];

  return (
    <div style={{ width: "1100px", height: "600px" }}>
      <MapContainer
        style={{ height: "100%", minHeight: "100%" }}
        bounds={zoom ? undefined : bounds}
        boundsOptions={{
          padding: [0, 0]
        }}
        maxBounds={bounds}
        zoom={center ? zoom : undefined}
        center={zoom ? center : undefined}
      >
        <ImageOverlay
          url="../ptichnikDraw.png"
          bounds={bounds}
          className="map_main"
        />
      </MapContainer>
    </div>
  );
};

const App = () => {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center"
      }}
    >
      <M width={1500} height={500} center={[0, 0]} />
    </div>
  );
};

export default App;

【问题讨论】：

标签： javascript css reactjs dictionary leaflet

【解决方案1】：

使用默认的 Leaflet JavaScript 库，您可以使用 map.invalidateSize()。不知道这在 React 中是如何工作的，但也许你可以使用文档来解决这个问题。

【讨论】：