标记未在 React Leaflet 中显示

Question

向站点添加了 React Leaflet map。 我想放置一个自定义标记，但现在它没有显示在页面上。 滚动时它始终显示在 map 的角落。 如何解决这个问题？

    // Marker

    const Marker = () => {
      return (
        <div>
          <div
            className="marker"
            style={{ height: "30px", width: "30px", backgroundColor: "red" }}
          ></div>
        </div>
      );
    };

    export default Marker;


    // Map

    const Map = () => {
      const position = [51.505, -0.09];
      return (
        <div>
          <MapContainer
            center={[51.505, -0.09]}
            zoom={13}
            scrollWheelZoom={false}
            style={{ height: "100vh", width: "100%" }}
          >
            <TileLayer
              attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            <Marker position={position}></Marker>
          </MapContainer>
        </div>
      );
    };

    export default Map;

Answer 1

我的片段效果很好，你可以试试这个：-

import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import icon from "leaflet/dist/images/marker-icon.png";
import L from "leaflet";
import iconShadow from "leaflet/dist/images/marker-shadow.png";

let DefaultIcon = L.icon({
  iconUrl: icon,
  shadowUrl: iconShadow,
});

L.Marker.prototype.options.icon = DefaultIcon;

<section className="container-fluid p-0">
  <MapContainer center={[23.7934, 90.4064]} zoom={16} scrollWheelZoom={false}>
    <TileLayer
      attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    <Marker position={[23.7934, 90.4064]}>
      <Popup>My Location</Popup>
    </Marker>
  </MapContainer>
</section>;

// css
.leaflet-container{
  height: 500px !important;
}