使用 react-leaflet 时缺少 Leaflet Map Tiles答案

【问题标题】：Missing Leaflet Map Tiles when using react-leaflet使用 react-leaflet 时缺少 Leaflet Map Tiles
【发布时间】：2019-03-05 18:34:46
【问题描述】：

我在准系统create-react-app 应用程序中使用来自leaflet-react 的simple example。

问题：地图图块会渲染，但总是有 1-2 行地图图块未渲染（灰显）。移动地图时，不同的行会开始消失。

但是，如果我要调整浏览器窗口的大小，地图会正确呈现！

问题是什么，我们该如何解决？

使用react-leaflet v2.2.1、leaflet 1.4.0。 Chrome 浏览器和 Brave 浏览器同样的问题。

Maps.js

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

class Maps extends Component {
    constructor() {
        super();
        this.state = {
            lat: 51.505,
            lng: -0.09,
            zoom: 13
        }
    }

    render() {
        const position = [this.state.lat, this.state.lng];

        return (
            <div>
                <Map center={position} zoom={this.state.zoom}>
                    <TileLayer
                        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                        url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
                    />
                    <Marker position={position}>
                        <Popup>
                            <span>A pretty CSS3 popup. <br/> Easily customizable.</span>
                        </Popup>
                    </Marker>
                </Map>

            </div>

        )
    }
}

export default Maps;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import './index.css';
import Maps from './containers/Maps/Maps.js';

ReactDOM.render(
    <Router>
        <div>
            <Switch>
                <Route path="/" exact component={Maps} />
            </Switch>
        </div>
    </Router>
    , document.getElementById('root'));

index.css

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

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
  integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
  crossorigin=""/>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

【问题讨论】：

您能否查看浏览器控制台，看看尝试获取这些磁贴的请求会发生什么情况？
@RemcoGerlich 浏览器 JS 控制台中没有出现任何内容。调整浏览器窗口大小时，会从 GET 请求中收到许多 .png 平铺图像，并且灰色区域会立即填充平铺。
试试<Map style={{ height: "100vh" }}
@kboul 这行得通！为什么需要这个？
@kboul 当然，请

标签： javascript reactjs leaflet react-leaflet

【解决方案1】：

您只需将height 属性传递给您的Map 组件实例。我相信您在此之后不需要这段代码：

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

所以应该是

<Map 
    style={{ height: "100vh" }} 
    center={position} 
    zoom={this.state.zoom}>
      <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' />
      <Marker position={position}>
            <Popup>
                 <span>A pretty CSS3 popup. <br/> Easily customizable.</span>
            </Popup>
      </Marker>
</Map>

Demo

【讨论】：

谢谢。成就了我的一天。为什么那些反应传单的书呆子没有得到一个简单的样本？不明白：/
如果有人仍有问题，请确保在您的 index.html 中有 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
是的，为什么这个库的作者没有把它放到他们自己的设置指南中的示例代码中？？
今天我使用的是而不是并且这个错误似乎仍然存在？至少 MapContainer 中的 style 属性对我没有任何作用......有同样问题的人吗？
我将 MapContainer 的高度设置为 90%，但我从未在它所在的任何 div 上设置绝对高度。一旦我以绝对像素设置高度，它就起作用了。所以现在没关系，但在项目后期我需要处理一些 css :D 谢谢你的提示！