我有这个反应组件:
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;
问题是下载页面时,地图会收缩到容器的左侧。我必须调整窗口大小以使地图以全宽显示。看图片。
这里有什么问题? :)
初始化地图后必须调用
map.invalidateSize();
也许此链接可以帮助您在 reactjs 中使用它:https://stackoverflow.com/a/56184369/8283938
使用反应钩子。这有效:
const map = useMap()
useEffect(() => {
setTimeout(() => {
map.invalidateSize();
}, 250);
}, [map])
但解决方案对我来说似乎有点老套。 250ms 似乎是任意的。
使用反应钩子,没有 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 的 StackOverflow 得到了使用 ResizeObersver 的想法answer