How to add Markes to a Leaflet-map with coordinates from database in Next.js?

Question

我必须显示数据库中所有位置的标记。目前我只能显示一个标记。

我从数据库映射了数组，但我不知道如何连接这两个。我真的很感激任何帮助。 到目前为止，这是我的代码：

<div>
      <MapContainer
        center={position}
        zoom={13}
        scrollWheelZoom={true}
        style={{ height: 500 }}
        // whenCreated={setMap}
        animate={true}
      >
        <TileLayer
          attribution='&copy; <a href="http://www.openstreetmap.org/copyright"'
          url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={position}>
          <Popup>Hi there!</Popup>
        </Marker>
      </MapContainer>

      {places.map((place) => (
        <div key={place.id}>
          {place.longCoord}, {place.latCoord}
        </div>
      ))}
    </div>
  );

Answer 1

只需在 MapContainer 中使用 .map。像下面

<MapContainer
center={position}
        zoom={13}
        scrollWheelZoom={true}
        style={{ height: 500 }}
        // whenCreated={setMap}
        animate={true}
>
<TileLayer
          attribution='&copy; <a href="http://www.openstreetmap.org/copyright"'
          url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
  {places.map((item, i) => (
    <Marker key={i} position={{ lat: item.latCoord, lng: item.longCoord}}>
      <Popup>Hi there!</Popup>
    </Marker>
  ))}
</MapContainer>;