react-leaflet
贴图未正确渲染。
- Map在其父级边界之外渲染
- Map的某些切片丢失
将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;
4条答案
按热度按时间9ceoxa921#
首先,通过控制台安装:
在index.js中导入一个位于node_modules中的css
所以,现在只需添加边距和高度:
或
fiei3ece2#
也将这些传单的CSS和JS文件添加到您的项目中
也添加高度到Map。这是强制性的。
简单的JsFiddle P.S.查看外部资源。
6kkfgxo03#
主要问题是CSS没有被导入,并且Map组件的高度没有设置。
然后,我使用
react-leaflet-marker-layer
修复了缺少标记图像的问题rslzwgfq4#
也许你可以试试这个,它用于React.js或Next.js,现在它正在react.js 18上工作。
首先,我建议卸载任何传单库,然后安装这一个
您可以使用以下代码:
从here复制