反应传单地图加载不完整

Question

多次页面重新加载后有时会出现以下问题：

浏览器：Firefox、最新版本的 Edge。

代码片段：

import React, {useState, useEffect, useRef} from "react";
import { TileLayer , MapContainer , Marker , Popup  } from "react-leaflet"
import "leaflet/dist/leaflet.css";

import markerIconPng from "leaflet/dist/images/marker-icon.png"
import L, {Icon} from 'leaflet'


interface SammelstellenProps {
    lat: number;
    lon: number;
}



const TestMap = () => {
    const sammelstellen: SammelstellenProps[] = [
        {
        "lat": 51.5, 
        "lon": 9.9, 
        }];

    return(
        <MapContainer 
            center={[51.532807,9.935401]} 
            zoom={ 13 } 
            scrollWheelZoom={true}
            style={{width: "100%", height: "400px", marginBottom: "2em"}}
            // className="map-container" 
            >
            <TileLayer
                attribution='&copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            {
                sammelstellen.map(
                    s => {return(
                    <Marker 
                        position={[s.lat, s.lon]} 
                        icon={new Icon({iconUrl: markerIconPng, iconSize: [25, 41], iconAnchor: [12, 41]})}
                        >
                        <Popup>
                            <p>some text ... </p>

                        </Popup>
                    </Marker>

                    );}
                )
        }
    </MapContainer>
    )
};

export default TestMap;

整页重新加载（ctrl + shift + R）后问题不再存在。

提前感谢您的支持。

Answer 1

看来你需要将样式添加到MapContainer中来解决这个问题

    zoom={13}
    scrollWheelZoom{false}> </MapContainer>