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

Question

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

- 在这个 link 中描述为什么它不起作用但使用 '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

我补充：

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

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

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

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

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

...

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

...

 {renderMap && (
          <MapContainer
    ...

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

react-leaflet map is not correcly displayed in Ionic 5

reactjs

ionic-framework

leaflet

react-leaflet

ionic5