React 应用程序中的地图显示不正确

Question

我正在尝试使用react-leaflet将地图对象插入到我的React应用程序中，但我在下面的屏幕上得到了这样的结果。

这是我用于组件“GeographyChart”的代码

import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";



const GeographyChart = ({ isDashboard = false }) => {
  const position = [51.505, -0.09];
  return (
    <div style={{ width: "100%", height: "100%" }}>
      <MapContainer
        center={position}
        zoom={15}
        width={500}
        height={500}
      >
        <TileLayer
          attribution="&copy; OpenStreetMap contributors"
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        {isDashboard ? (
          <Marker position={position}>
            <Popup>
              <p>Это Лондон</p>
            </Popup>
          </Marker>
        ) : null}
      </MapContainer>
    </div>

  );
};

export default GeographyChart;

这就是使用该组件的场景代码

import React, { useRef } from 'react';
import { Box, useTheme } from '@mui/material';
import GeographyChart from '../../components/GeographyChart';
import Header from '../../components/Header';
import { tokens } from '../../theme';

const Geography = () => {
  const theme = useTheme();
  const colors = tokens(theme.palette.mode);
  const scene = useRef(null);
  const map = useRef(null);

  return (
    <Box m="20px">
      <Header title="Панель мониторинга" subtitle="Мониторинг транспорта в реальном времени" />

      <Box
        ref={scene}

        width="100%"

      >
        <GeographyChart
          top={(scene.height - map.height) / 2}
          left={(scene.width - map.width) / 2}
          map={map}
          layer={1}
        />
      </Box>
    </Box>
  );
};

export default Geography;

Answer 1

您需要手动导入leaflet css文件。只需在您使用传单地图的组件中添加以下导入即可。

import "leaflet/dist/leaflet.css";