[英]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.