如何解决React-Leaflet 正在创建两个地图
我正在尝试创建一个小地图,但由于某种原因,react-leaflet 将地图渲染了两次。 我认为它的容器不够大,无法容纳地图,因此将其翻译出来,但我不知道它应该有多大。 文档并没有真正提到这一点。
import React from 'react';
import { MapContainer,TileLayer } from 'react-leaflet';
const MapStyle = {
height: '100px',width: '100px',};
const MiniMap = assetLocation => {
return (
<MapContainer center={[45.4,-75.7]} zoom={13} scrollWheelZoom={false} style={MapStyle}>
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
</MapContainer>
);
};
我在 Antd 的网格系统中实现了它
<Row>
<Space>
<Col>
<MiniMap assetLocation={item} />
<NavButtons id={id} />
</Col>
<Col>{ ...otherComponents }</Col>
</Space>
解决方法
我错过了传单的 CSS。 只需要导入到react组件中即可:
import 'leaflet/dist/leaflet.css';
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。