React Leaflet:将对象从MongoDB作为标记从Leaflet地图获取(使用node.js和express)

{
  "_id": ObjectId,
  "name": String,
  "latitude": Number,
  "longitude": Number
}

const express = require('express');
const mongoose = require('mongoose');
const app = express();
const port = 3000;

mongoose.connect('mongodb://localhost:27017/mydatabase', { useNewUrlParser: true, useUnifiedTopology: true });

const locationSchema = new mongoose.Schema({
  name: String,
  latitude: Number,
  longitude: Number
});

const Location = mongoose.model('Location', locationSchema);

app.get('/locations', async (req, res) => {
  const locations = await Location.find();
  res.json(locations);
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

import React, { useEffect, useState } from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';

delete L.Icon.Default.prototype._getIconUrl;

L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});

function Map() {
  const [locations, setLocations] = useState([]);

  useEffect(() => {
    fetch('/locations')
      .then(response => response.json())
      .then(data => setLocations(data));
  }, []);

  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"
      />
      {locations.map(location => (
        <Marker key={location._id} position={[location.latitude, location.longitude]}>
          <Popup>
            {location.name}
          </Popup>
        </Marker>
      ))}
    </MapContainer>
  );
}

export default Map;