反应叶无法在Ionic中正确渲染地图

编程问答 2022-06-13

问题描述

enter image description here

我见过几个人有这个问题，但是没有提出的解决方案对我有帮助。我相信我可以正确设置所有内容。

我的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;
}

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

解决方法

尝试一下，我们正在使地图无效以使其重新呈现

<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

ionic-frameworkleafletreact-leafletreactjsreactjsreactjsreactjs