[英]Missing Leaflet Map Tiles when using react-leaflet
我在准系统create-react-app
应用程序中使用了Leaflet-react中的简单示例。
问题:地图图块会渲染,但总是有 1-2 行地图图块没有渲染(变灰)。 当地图四处移动时,不同的行将开始消失。
但是,如果我要调整浏览器窗口的大小,地图会正确呈现!
问题是什么,我们如何解决?
使用react-leaflet
v2.2.1, leaflet
1.4.0。 Chrome 浏览器和 Brave 浏览器也有同样的问题。
地图.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;
索引.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'));
索引文件
.leaflet-container {
height: 800px;
width: 100%;
}
索引.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.