如何在react leaflet Map上显示geodjango rest api响应

npm install react-leaflet leaflet axios

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

const MapComponent = () => {
  const [markers, setMarkers] = useState([]);

  useEffect(() => {
    // 发送GET请求获取GeoDjango REST API响应数据
    axios.get("http://your-api-url").then((response) => {
      setMarkers(response.data); // 将响应数据保存到状态中
    });
  }, []);

  return (
    <MapContainer center={[0, 0]} zoom={2}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      {markers.map((marker) => (
        <Marker position={[marker.lat, marker.lng]} key={marker.id} />
      ))}
    </MapContainer>
  );
};

export default MapComponent;