使用react-leaflet时缺少Leaflet地图图块
Nyx*_*nyx 5 javascript leaflet reactjs react-leaflet
我在准系统应用程序中使用leaflet-react的简单示例。create-react-app
问题：地图图块确实会渲染，但始终有 1-2 行地图图块未渲染（呈灰色）。当地图移动时，不同的行将开始消失。
但是，如果我要调整浏览器窗口的大小，地图就会正确渲染！
问题是什么？我们该如何解决？
使用react-leafletv2.2.1、1.4.0 leaflet。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'));
索引.css
.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>
您只需将一个heightprop 传递给您的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>
- 谢谢。让我很开心。为什么那些反应传单的书呆子没有得到一个简单的样本？没明白：/ (6认同)
- 如果有人仍然遇到问题，请确保有`<link rel =“stylesheet”href =“https://unpkg.com/leaflet@1.4.0/dist/leaflet.css”integrity =“sha512-puBpdR0798OZvTTbP4A8Ix/l+” A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>` 在你的index.html中 (2认同)