React-Leaflet 正在创建两个地图答案

【问题标题】：React-Leaflet is creating two mapsReact-Leaflet 正在创建两个地图
【发布时间】：2021-04-14 04:05:22
【问题描述】：

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

【问题讨论】：

实际地图的代码在哪里？我只看到小地图的代码和包含它的位置。你能把实际地图和小地图的代码加在一起吗？ Minimap comp 应该是 MapContainer 的子节点，而您的代码中似乎并非如此
代码是正确的你不是在2个地方实例化它吗？
@kboul 你是什么意思？我分享了 MiniMap 组件 --- MapContainer 直接来自 react-leaflet 库。不，我只实例化一次。它实际上是一张地图，但它正在翻译它，因为它不适合地图容器，但即使我使地图容器变大，它仍然会引发错误
在官方文档上查看这个例子here。它有你需要的一切。一个MapContainer 定义大地图，另一个在MinimapControl 内包含小地图。第二个是第一个的孩子。
@kboul 我不想在地图中放置小地图。我认为这就是混乱。我希望我的地图是仪表板中的一个小方块。很抱歉造成混淆，但 Minimap 组件只是一个很小的地图（可能是 300px x 300px）

标签： reactjs antd react-leaflet

【解决方案1】：

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

import 'leaflet/dist/leaflet.css';

【讨论】：