React Leaflet 创建多个地图

Question

我正在尝试创建地图，但由于某种原因正在显示多个地图。我不确定是什么原因造成的。

App.js：

import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
const position = [51.505, -0.09]

function Map() {
  return (
    <div className="map">
      <MapContainer
        center={position}
        zoom={100}
        scrollWheelZoom={false}
      >
        <TileLayer
          attribution='Some random text'
          url="http://blog.damonpollard.com/wp-content/uploads/2013/09/GTAV_ATLUS_4096x4096.png"
        />
        <Marker position={position}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </MapContainer>
    </div >
  );
}

export default Map;

index.css：

.leaflet-container {
  width: 100%;
  height: 100vh;
}

Answer 1

如果您将单个（非平铺）图像用作地图，请将其用作图像叠加层，而不是用作平铺层。