使用 react-leaflet 时缺少 Leaflet Map Tiles [英] Missing Leaflet Map Tiles when using react-leaflet

问题描述

我正在使用

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

问题出在哪里，我们该如何解决?

使用 react-leaflet v2.2.1和 leaflet 1.4.0.在Chrome浏览器和Brave浏览器上存在相同的问题.

Maps.js

  import'react'中的React，{组件};从'react-leaflet'导入{ Map, TileLayer, Marker, Popup };Maps类扩展了Component {Constructor(){极好的();this.state = {纬度:51.505，lng:-0.09，变焦:13}}使成为() {const position = [this.state.lat，this.state.lng];返回 (< div><地图中心= {位置} zoom = {this.state.zoom}>< TileLayerattribution ='& copy;< a href ="http://osm.org/copyright"> OpenStreetMap</a>贡献者的url ='http://{s} .tile.osm.org/{z}/{x}/{y} .png'/><标记位置= {位置}><弹出>< span>一个漂亮的CSS3弹出窗口.< br/>容易定制.</Popup></Marker></地图></div>)}}导出默认地图； 

index.js

  import从'react'导入React；从'react-dom'导入ReactDOM；从"react-router-dom"导入{BrowserRouter作为路由器，路由，交换机}；导入'./index.css';从"./containers/Maps/Maps.js"导入地图；ReactDOM.render(<路由器>< div>< Switch><Route path="/" 精确组件={Maps}/></Switch></div></路由器>，document.getElementById('root')); 

index.css

  .leaflet-container {高度:800像素；宽度:100％;} 

index.html

 <！DOCTYPE html>< html lang ="zh-CN">< head>< meta charset ="utf-8"/>< link rel =快捷方式图标" href =％PUBLIC_URL％/favicon.ico"/><元name ="viewport"content ="width = device-width，initial-scale = 1，srinkle-to-fit = no"/><元名称=主题颜色" 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"完整性="sha512-puBpdR0798OZvTTbP4A8Ix/l + A4dHDD0DGqYW6RQ + 9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7 + 7N4QKrDh + drA =="crossorigin ="/></head><身体>< noscript>您需要启用JavaScript才能运行此应用.< div id ="root"></div></body></html> 

解决方案

你只需要传递一个 height 属性给你的 Map 组件实例.我相信您在此之后不需要这段代码:

  .leaflet-container {高度:800像素；宽度:100％;} 

因此应为

 <地图样式= {{高度:"100vh"}}中心= {位置}zoom = {this.state.zoom}>< TileLayerattribution ='& copy;< a href ="http://osm.org/copyright"> OpenStreetMap</a>贡献者的url ='http://{s} .tile.osm.org/{z}/{x}/{y} .png'/><标记位置= {位置}><弹出>< span>一个漂亮的CSS3弹出窗口.< br/>容易定制.</Popup></Marker></地图> 

演示

I am using the simple example from leaflet-react in a barebones create-react-app app.

Problem: The map tiles do render, but there is always 1-2 rows of map tiles that do not render (grayed out). Different rows will start disappearing when the map is moved around.

However if i were to resize the browser window any amount at all, the map renders properly!

What is the problem, and how can we solve it?

Using react-leaflet v2.2.1, leaflet 1.4.0. Same problem on Chrome browser and Brave browser.

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>

解决方案

You just need to pass a height prop to your Map component instance. I believe you do not need this piece of code after this:

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

therefore it should be

<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

这篇关于使用 react-leaflet 时缺少 Leaflet Map Tiles的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！