react+leaflet 使用react-leaflet实现L.divIcon中放置四个div元素，给他们设置样式并显示为一个标记在地图上-Go服务器开发

要使用React和react-leaflet实现在地图上显示一个标记，并在L.divIcon中放置四个div元素，您可以按照以下步骤进行操作：

首先，在项目中安装所需的依赖项：

npm install react react-dom leaflet react-leaflet

创建一个新的React组件，例如MapMarker：

import React from "react";
import { MapContainer, TileLayer, Marker } from "react-leaflet";

const MapMarker = () => {
  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: "100vh", width: "100%" }}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <Marker position={[51.505, -0.09]} icon={customIcon}>
        <div className="marker-container">
          <div className="marker">1</div>
          <div className="marker">2</div>
          <div className="marker">3</div>
          <div className="marker">4</div>
        </div>
      </Marker>
    </MapContainer>
  );
};

export default MapMarker;

定义一个自定义图标（icon），其中包含四个带有样式的DIV元素。您可以使用CSS来设置样式，例如：

.marker-container {
  display: flex;
}

.marker {
  width: 20px;
  height: 20px;
  background-color: red;
  border-radius: 50%;
  margin-right: 5px;
}

在父组件或根组件中引入并渲染MapMarker组件：

import React from "react";
import MapMarker from "./MapMarker";

const App = () => {
  return (
    <div>
      <h1>React Leaflet Map</h1>
      <MapMarker />
    </div>
  );
};

export default App;

这样，您就可以在地图上显示一个标记，并在L.divIcon中放置四个带有自定义样式的div元素了。根据需要调整位置、样式和其他相关参数。

内容由零声教学AI助手提供，问题来源于学员提问