我正在使用 simple example来自 leaflet-react准系统create-react-app应用程序。
问题: map 瓦片会渲染，但始终有 1-2 行 map 瓦片未渲染(灰显)。本地图四处移动时，不同的行将开始消失。
但是，如果我要调整浏览器窗口的大小， map 会正确呈现!
问题是什么，我们该如何解决？
使用 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='© <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>
最佳答案
你只需要传递一个 height支持您的Map组件实例。我相信您在此之后不需要这段代码:
.leaflet-container {
height: 800px;
width: 100%;
}
因此应该是
<Map
style={{ height: "100vh" }}
center={position}
zoom={this.state.zoom}>
<TileLayer
attribution='© <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
关于javascript - 使用 react-leaflet 时缺少 Leaflet Map Tiles，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55009403/