react-leaflet
map 未正确渲染。
- map 在其父级边界之外渲染
- map 的某些图 block 丢失
将 map 与标准 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;
最佳答案
首先,通过控制台安装:
> npm install leaflet
> npm install react-leaflet
在index.js中导入一个位于node_modules中的css
//src/index.js
import 'leaflet/dist/leaflet.css'
所以,现在只需输入边距和高度:
////src/App.js
return (
<MapContainer center={position} zoom={3} scrollWheelZoom={false}
style={{ height:"`enter code here`400px",backgroundColor:"red",marginTop:"80px", marginBottom:'90px'
}} >
</MapContainer>
)
或
return (
<>
<Map style={{ width: "100%", height: "100vh" }} center={center} zoom={13}>
</Map>
</> )
关于twitter-bootstrap - React 传单未正确渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40103362/