Карта react-leaflet
не отображается должным образом.
- Карта отображается за пределами родительских границ.
- Некоторые фрагменты карты отсутствуют
Проблема возникает при использовании карты со стандартными react
компонентами.
Мой сайт также использует react-bootstrap
. Как я читал, это может вызвать некоторые потенциальные проблемы с рендерингом react-leaflet
.
import React from 'react';
import ReactDOM from 'react-dom';
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';
const position = [37.335556, -122.009167];
class MapView extends React.Component {
render() {
return (
<div
style={{
height:"100%"
}}>
<Map center={position} zoom={13}>
<TileLayer
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
<Marker position={position}>
<Popup>
<span>A pretty CSS3 popup.<br/>Easily customizable.</span>
</Popup>
</Marker>
</Map>
</div>
);
}
}
module.exports = MapView;