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

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

React Leaflet 创建多个地图

React Leaflet creating multiple maps

leaflet

react-leaflet