即使使用 leaflet.css 导入，React 传单地图也无法正确显示答案

【问题标题】：React leaflet map not correctly displayed even with leaflet.css import即使使用 leaflet.css 导入，React 传单地图也无法正确显示
【发布时间】：2020-10-26 16:51:24
【问题描述】：

我正在尝试使用 ionic 中的 reac-leaflet 创建一个地图，但我没有正确显示它，也可以点击此链接：Missing Leaflet Map Tiles when using react-leaflet

窗口大小调整修复。我在第一次登录时做错了什么？

第一次访问时，这是地图：

调整大小后：

这里是代码。

在 index.html 中

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>

Home.tsx 简化。

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

function Home() {

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar color="primary">
          <IonTitle>Logged in ... </IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <Map center={[45.24,8.55]} zoom={13}>
        <TileLayer
          attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={[45.24,8.55]}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
        </Map>
      </IonContent>
    </IonPage>
  )
}

export default Home;

在 css 文件中。

.leaflet-container {
  height: 100%;
  width: 100%;
}

谢谢。

【问题讨论】：

您需要致电map.invalidateSize()看这里：stackoverflow.com/a/56184369/8283938
您的示例有效，即使不使用 invalidateSize，但我使用的是 react-leaflet。在示例中使用传单。

标签： reactjs leaflet ionic5 react-leaflet

【解决方案1】：

我在使用 Ionic 5 和 React Leaflet 3 时遇到了同样的问题，我这样解决了：

在您使用leaflet-react 组件的页面（在您的情况下为Home），导入useIonViewDidEnter 生命周期方法（see full docs）以了解IonPage 何时已完成动画，然后触发窗口调整大小事件。

import { IonPage, useIonViewDidEnter, ... } from '@ionic/react';
function Home() {

     /* 
      * trigger a 'window-resize' event when Page has finished, 
      * rendering and animating, so leaflet map can read a 
      * consistent height value
      */
     useIonViewDidEnter(() => {
        window.dispatchEvent(new Event('resize'));
     });

     return (
        <IonPage>
           ... your Leaflet component...
        </IonPage>
     );
}

对我来说效果很好。如果有帮助，请告诉我。

【讨论】：

这解决了。我认为这不是“正确”的方式（react-leaflet 必须在启动时发生一些奇怪的事情），但这是一个很好的解决方法。谢谢。
这里很好地解释了为什么（在某些情况下）它在第一次渲染时不能正确显示的原因 -> stackoverflow.com/a/36257493/5108194 我发现“窗口调整大小”方法是一个很好的解决方案，因为它不会干扰Leaflet 实例，就像 invalidateSize() 一样。但是，是的，仍然是一种解决方法:)

【解决方案2】：

这就是我目前所做的并为我工作：

windowDimensions.tsx

import { useState, useEffect } from 'react';

function getWindowDimensions() {
  const { innerWidth: width, innerHeight: height } = window;
  return {
    width,
    height,
  };
}

export default function useWindowDimensions() {
  const [windowDimensions, setWindowDimensions] = useState(
    getWindowDimensions(),
  );

  useEffect(() => {
    function handleResize() {
      setWindowDimensions(getWindowDimensions());
    }

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return windowDimensions;
}

app.js 或 componentfile.js

import useWindowDimensions from 'path/to/useWindowDimensions'; //in my case i saved it as app/utils/windowDimensions
    <Map style={{height: mapHeight}} />

注意：app.js 仅包含与修复相关的代码

【讨论】：

相同。谢谢。

【解决方案3】：

  <link href='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css' rel='stylesheet'>

试试这个

【讨论】：