javascript - 使用 React 的地图加载不正确传单

Question

我尝试使用“leaflet”&&“react-leaflet”，但在这两种情况下，地图显示都是这样的。我可以与这张地图进行交互，但地图片段显示不正确，有距离。看起来并非所有地图块都加载了，或者可能是不正确的 css 样式。请检查此代码：

import React, { useState, useEffect }  from "react";
import styled from "styled-components";
import ScrollHandler from "../../components/ScrollHandler";
import SectionWipes from "../../components/SectionWipesComponent/SectionWipes";
import "./BodyHomePage.css";
import L, { LatLngExpression } from 'leaflet';

function BodyHomePage()
{
    const _isScrolled = ScrollHandler();
    const position: LatLngExpression = [51.505, -0.09];
    const [isMapCreated, setCount] = useState(false);
    
    useEffect(() => {
            if(!isMapCreated)
            {
                const map = L.map('map').setView(position, 13);
                
                L.tileLayer('https://api.maptiler.com/maps/basic/{z}/{x}/{y}.png?key=L7jWH8UlPu3enKseP3Nw', {
                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
                }).addTo(map);
                
                L.marker(position)
                .addTo(map)
                .bindPopup('A pretty CSS3 popup. <br> Easily customizable.');
                setCount(true);
        }
      });


    
    return(
        <div style={{position: "absolute", top: "1px", zIndex: -1}}>
            <StyledDiv style={{height: "120vh"}}>
                <StyledVideo src={backgroundSmokeVideo} autoPlay muted loop />
                <StyledFlexVideoContainer isScrolled={_isScrolled}>                    
                    <h1 style={{fontFamily:"PermanentMarker-Regular", fontSize: "12vw", mixBlendMode: "overlay", color: "#fff"}}>
                        Smokey Way
                    </h1>
                </StyledFlexVideoContainer>
            </StyledDiv>
            <SectionWipes/>
            <StyledDiv style={{backgroundColor: "black"}}>

            </StyledDiv>
            <StyledDiv style={{backgroundColor: "pink"}}>
            <div id="map" ></div>
        </div>
    )
}
export default BodyHomePage;