react-leaflet 地图在 Ionic 5 中未正确显示

Question

当我尝试在移动视图中显示地图时，我看到损坏的地图：

https://stackoverflow.com/a/36257493/13739566 - 此链接中是 描述为什么它不起作用，但使用“invalidSize()”在我的情况下不起作用（或者可能我使用错误）。这是我的代码：

import React from 'react';
import { IonContent, IonApp, IonHeader} from '@ionic/react';

import { Map as Maps, Marker, Popup, TileLayer, } from 'react-leaflet'

import 'leaflet/dist/leaflet.css'
import './MainTab.css';

const MainTab: React.FC = () => {

  return (
    <IonApp>
      <IonContent>
        <IonHeader>Header</IonHeader>

        <Maps center={position} zoom={13} keyboard={0} >

        <TileLayer
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
        <Marker position={position}>
    <Popup>Kliknij aby przejść do googla: </Popup>
    </Marker>
  </Maps>

        </IonContent>
  </IonApp>
  );
};

export default MainTab;

Answer 1

我遇到了同样的问题，它似乎与 Ionic 视图组件异步，并且渲染“太早”的地图，我现在通过设置轻微的延迟解决了这个问题。

const [ renderMap, setRenderMap ] = useState(false);

...

useLayoutEffect(() => {
    setTimeout(() => setRenderMap(true), 10);
  }, [])

...

 {renderMap && (
          <MapContainer
    ...

Answer 2

即使使用

useEffect()

我也无法纠正地图。所以，我观察到了

onload()

事件。

import { Map, TileLayer, Marker } from 'react-leaflet';
import { LatLngTuple } from 'leaflet';

import 'leaflet/dist/leaflet.css';

const defaultLatLng: LatLngTuple = [-7.19207, -48.20779];
const zoom: number = 14;

const LeafletMap: React.FC = () => {

// ...

const refMap = useRef<Map>(null);

const startMap = useCallback(() => {
    refMap.current?.leafletElement.invalidateSize();
    setTimeout(() => {
      setLoading(false);
    }, 250);
  }, []);

  useEffect(() => {
    document.addEventListener('deviceready', startMap, false);
    window.addEventListener('load', startMap, false);
  });

// ...

<Map
  ref={refMap}
  center={defaultLatLng}
  zoom={zoom}
>
    <TileLayer
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    ></TileLayer>
</Map>

}

我还没有找到更好的方法。

Answer 3

我补充：

...
const mapRef = useRef(null)
useEffect(()=>{
      
      const map = mapRef.current.leafletElement; 
      map.invalidateSize()
     }
     )

我在地图的参考中使用了mapRef，它对我有用

Answer 4

对于那些在 2024 年仍在为这个问题苦苦挣扎的人，我在 Github 上找到了解决方案 https://github.com/PaulLeCam/react-leaflet/issues/1052#issuecomment-1832647862 使用 useMap，它是一个内置钩子，可以从 leaflet 导入并调用 invalidateSize。

import {useMap} from 'react-leaflet' 
const ComponentResize = () => {
const map = useMap();

setTimeout(() => {
    map.invalidateSize();
}, 0);

return null; };

在组件中添加对 ComponentResize 的调用 -

<ComponentResize />