我如何使用我从使用react-leaflet获得的标记请求中收到的坐标？

Question

我有一个反应传单地图，我想使用axios.get res.data坐标中的坐标，而不是访问硬编码的JSON在我的地图上建立标记。

我正在接收坐标，我似乎无法理解如何在地图上将其用作标记。

import React, { useEffect } from "react";
import { Map as LeafletMap, TileLayer, Marker, Popup } from "react-leaflet";
import "./Map.css";
import { Link, MemoryRouter } from "react-router-dom";
import axios from "axios";
import * as cameraData from "./CameraCoords.JSON";

const Map = () => {
  const [setActiveCamera] = React.useState(null);
  const [setCoords] = React.useState([]);

  useEffect(() => {
    async function getCoords() {
      try {
        const res = await axios.get(
          "http://localhost:3000/api/mapCoordinates/mapCoordinates"
        );
        setCoords(res.data);
      } catch (error) {
        console.log(console.error());
      }
    }
    getCoords();
  }, [setCoords]);

  return (
    <div style={{ margin: 100 }}>
      <h1>Camera Trap Map</h1>
      <LeafletMap
        center={[4.2105, 101.8758]}
        zoom={1}
        maxZoom={10}
        attributionControl={true}
        zoomControl={true}
        doubleClickZoom={true}
        scrollWheelZoom={true}
        dragging={true}
        animate={true}
        easeLinearity={0.35}
      >
        <TileLayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png" />
        {/* Tile layer needed to give attirbute to Map */}
        {cameraData.features.map(camera => (
          <Marker
            key={camera.properties.CAMERA_ID}
            position={[
              camera.geometry.coordinates[1],
              camera.geometry.coordinates[0]
            ]}
            onClick={() => {
              setActiveCamera(camera);
            }}
          >
            <Popup>
              <MemoryRouter initialEntries={["/"]}>
                <Link to="/imageGrid">Project 1</Link>
              </MemoryRouter>
            </Popup>
          </Marker>
        ))}
      </LeafletMap>
    </div>
  );
};

export default Map;

从get请求返回的数据看起来像这样：

0: {coordinates: "30.001, 20.002"}

Answer 1

像在getCoords功能上一样更新坐标状态后>

像这样在坐标数组上循环：

{coords.map((coordinatesSet, index) => {
      const [lng, lat] = coordinatesSet.coordinates.split(",");

      return (
        <Marker
          key={index}
          position={[parseFloat(lng), parseFloat(lat)]}
          icon={icon}
          onClick={() => {
            setActiveCamera(coordinatesSet); // here whatever you desire, not sure what you want to achieve with the onClick
          }}
        >
          <Popup>
            <MemoryRouter initialEntries={["/"]}>
              <Link to="/imageGrid">Project 1</Link>
            </MemoryRouter>
          </Popup>
        </Marker>
      );
    })}
并确保您正确声明坐标状态：

const [coords, setCoords] = React.useState([]);
Demo

在演示中，我使用了虚假的承诺来模仿异步请求，以便您可以实时看到它。