小编Wil*_*ard的帖子

如何在Mapbox 地图对象之外创建可以拖入其中的元素？例如，假设我想在页面上呈现位置列表。每个位置都是一个带有自定义标记或图标的 React 组件。

在此位置列表旁边是 Mapbox 地图。位置列表不会在地图内呈现。虽然我知道可以使这些单独的位置组件可拖动，但是否可以将它们拖放到 Mapbox 地图中，并将其识别为地图上具有纬度/经度坐标的实际标记？如果是这样，我该怎么做？

以下是我尝试过的代码中的相关源文件：

索引.js

import dynamic from "next/dynamic";
import { useSelector } from "react-redux";
import Plant from "../../components/Plant";

const MapboxMap = dynamic(() => import("../../components/MapboxGLMap"), {
  ssr: false,
});

const Blueprint = () => {
  const plants = useSelector((state) => state.plants);

  const showPlants = () => {
    return (
      <React.Fragment>
        {plants.map((plant) => (
          <Plant plant={plant} />
        ))}
      </React.Fragment>
    );
  };

  return (
    <React.Fragment>
      <div className="ui container centered grid blueprint">
        <div className="three wide …