React-leaflet 无法在 Ionic 中正确渲染地图答案

【问题标题】：React-leaflet not rendering map properly in IonicReact-leaflet 无法在 Ionic 中正确渲染地图
【发布时间】：2021-01-05 17:23:05
【问题描述】：

我见过几个人遇到这个问题，但是所提供的解决方案都没有帮助我。我相信我设置正确。

我的 index.html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Ionic App</title>

    <base href="/" />

    <meta name="color-scheme" content="light dark" />
    <meta name="viewport"
        content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/assets/icon/favicon.png" />

    <!-- Leaflet -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin="" />

    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>

    <!-- add to homescreen for ios -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-title" content="Ionic App" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>

<body>
    <div id="root"></div>
</body>

</html>

以防万一在 index.js 中导入它

import 'leaflet/dist/leaflet.css'

组件：

import React from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css'

import './Tab1.css';

const Tab1 = () => {
    const data = {
        lat: 51.505,
        lng: -0.09,
        zoom: 5
    }

    const position = [data.lat, data.lng];
    return (
        <IonPage>
            <IonHeader>
                <IonToolbar>
                    <IonTitle>Tab 1</IonTitle>
                </IonToolbar>
            </IonHeader>
            <IonContent fullscreen>
                <Map center={position} zoom={data.zoom} style={{ height: "100vh" }} >
                    <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={position}>
                        <Popup>
                            A pretty CSS3 popup. <br /> Easily customizable.
                        </Popup>
                    </Marker>
                </Map>
            </IonContent>
        </IonPage>
    );
};

export default Tab1;

终于在 Tab1.css 中：

.leaflet-container{
    height: 800px;
  width: 800px;
}

最终效果是加载时加载的唯一图块是左上角的，然后当我滚动它时会加载随机图块。我真的错过了什么吗？

【问题讨论】：

不知道这是否有帮助，但我才意识到，如果我打开或关闭 devtools，它就会开始工作。对我没有任何意义

标签： reactjs ionic-framework leaflet react-leaflet

【解决方案1】：

试试这个，我们正在使地图无效以使其重新渲染

<TileLayer 
   onLoad={(e:any)=> { e.target._map.invalidateSize()}}
   attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
   url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />

来源 - https://github.com/PaulLeCam/react-leaflet/issues/46

【讨论】：

适用于 Firefox，不适用于 Chrome，当我稍微移动地图时，它仍然加载不完整但完全加载。你熟悉传单吗？因为我正在制作一个非常依赖地图的应用程序，并且当只显示地图需要解决方法时，我害怕我会一直遇到障碍，它有很多问题吗？
您也可以将其添加到 setTimeout 中，这应该可以。我在 chrome 上对此进行了测试，所以我很惊讶它对你不起作用。
@AaronSaunders 现在我做了一个解决方法，当组件挂载时，我只需执行 1S 的 setTimeout，并将纬度设置为某个较远的地方，然后立即将其设置回适当的纬度，这会强制刷新瓷砖。也在其他机器和手机上尝过，使用 Chrome 时同样的问题。甚至 Edge 对您的解决方案也没有任何问题。我会更多地使用这个库，因为我真的没有其他选择。
@MazMat 想看看你的代码，我没有你提到的这些问题