使用 react-leaflet 初始化时地图不可见答案

【问题标题】：Map is not visible at initialization using react-leaflet使用 react-leaflet 初始化时地图不可见
【发布时间】：2022-02-06 20:10:45
【问题描述】：

我有这个反应组件：

import React, { Fragment } from 'react';
import L from 'leaflet';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

const customMarker = new L.icon({
    iconUrl: '/images/poemEditorTools/location-pointer-new.svg',
    iconSize: [56, 72],
    iconAnchor: [26, 72],
}); 

const MyPopupMarker = ({ content, position }) => (
    <Marker position={position} icon={customMarker} >
      <Popup>{content}</Popup>
    </Marker>
)

const MyMarkersList = ({ markers }) => {
    const items = markers.map(({ key, ...props }) => (
        <MyPopupMarker key={key} {...props} />
    ))
    return <Fragment>{items}</Fragment>
}

const markers = [
    { key: 'marker1', position: [51.5, -0.1], content: 'My first popup' },
    { key: 'marker2', position: [51.51, -0.1], content: 'My second popup' },
    { key: 'marker3', position: [51.49, -0.05], content: 'My third popup' },
]

class MapWithPoems extends BaseComponent {
    render() {
        return (
            <Map center={[51.505, -0.09]} zoom={13} style={{ height: "500px", width: "100%" }} >
                <TileLayer
                    url={
                        "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}"
                    }
                />
                <MyMarkersList markers={markers} />
            </Map>
        );
    }
}

export default MapWithPoems;

问题是当页面被下载时，地图会收缩到容器的左侧。我必须调整窗口大小以使地图以全宽显示。查看图片。

这里有什么问题？ :)

【问题讨论】：

标签： reactjs leaflet react-leaflet

【解决方案1】：

你必须在初始化地图后调用map.invalidateSize();。

也许这个链接可以帮助你在 reactjs 中使用它：https://stackoverflow.com/a/56184369/8283938

【讨论】：

谢谢！ :) 我必须这样做。 componentDidMount() { const map = this.mapRef.current.leafletElement; setTimeout(() => { map.invalidateSize(); }, 250);需要在 .invalidateSize() 之前添加超时
@podeig 地图有一个事件 'wenReady'，您可能想使用它而不是计时器。将它与您的“缩放”和“样式”道具一起添加，whenReady={() => { console.log('Map is ready...add stuff here :-)'); }}

【解决方案2】：

使用反应钩子。这有效：

const map = useMap()

useEffect(() => {
    setTimeout(() => { 
        map.invalidateSize(); 
    }, 250); 
}, [map])

但解决方案对我来说似乎有点 hacky。 250 毫秒似乎是任意的。

【讨论】：

【解决方案3】：

使用 react 钩子，没有 setTimeout()。这个实现对我有用。

const setMap = ( map: LeafletMap ) => {
        const resizeObserver = new ResizeObserver( () => {
                map.invalidateSize()
        } 
        const container = document.getElementById('map-container')
        resizeObserver.observe(container!)
}


<MapContainer
...other properties
id='map-container'
whenCreated={setMap}

>

</MapContainer>

whenCreated 允许您使用地图实例作为函数的参数，请查看此 react-leaflet documentation。

我从 Michael MacFadden's StackOverflow answer 得到了使用 ResizeObersver 的想法

【讨论】：