reactjs - React-Leaflet 正在创建两个地图

Question

我正在尝试创建一个小地图，但由于某种原因，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>

标签： reactjsantdreact-leaflet

Answer 1

我错过了传单的 CSS。只需要将其导入到 react 组件中：

import 'leaflet/dist/leaflet.css';