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>

Answer 1

我错过了 Leaflet 的 CSS。只需要导入到react组件中即可：

import 'leaflet/dist/leaflet.css';

React-Leaflet 正在创建两个地图

React-Leaflet is creating two maps

reactjs

react-leaflet

antd