使用React无法正确加载地图传单

问题描述

我尝试使用“ 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;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）