javascript - Mapbox 标记弹出窗口不会单独打开/关闭

Question

当用户在我的 map 上单击添加的标记时，它会打开 map 上所有标记的弹出窗口

弹出窗口会针对在数据库加载的标记上单击的单个标记打开，但对于“setShowUserPopup”，它们会针对用户添加的每个标记打开，如照片所示(表单是弹出内容)

感谢您提前提供的任何帮助!

import React, { useState, useEffect } from "react";
import ReactMapGL, { Marker, Popup } from "react-map-gl";

import { listLogEntries } from "./API";
import LogEntryForm from "./LogEntryForm";
import { Grid, Card, Icon, Fab } from "@material-ui/core";

const BasicMap = () => {
  // Markers loaded from database
  const [logEntries, setLogEntries] = useState([]);
  const [showPopup, setShowPopup] = useState({});

  // Markers from user input
  const [userMarkers, setUserMarkers] = useState([]);
  const [showUserPopup, setShowUserPopup] = useState({});

  // viewport is all the infomation about the default map state
  const [viewport, setViewport] = useState({
    width: "100vw",
    height: "100vh",
    latitude: 52.950001,
    longitude: -1.15,
    zoom: 6,
    minZoom: 3
    // maxZoom: 3
  });

  // Get entries from API

  const getEntries = async () => {
    const logEntries = await listLogEntries();
    setLogEntries(logEntries);
  };

  useEffect(() => {
    getEntries();
  }, []);

  const showAddMarkerPopup = event => {
    const [longitude, latitude] = event.lngLat;

    setUserMarkers([
      ...userMarkers,
      {
        id: userMarkers.length + 1,
        lat: latitude,
        long: longitude,
        draggable: true
      }
    ]);
  };

  useEffect(() => {
    console.log("userMarkers", userMarkers);
  }, [userMarkers]);

  return (
    <ReactMapGL
      {...viewport}
      mapStyle="mapbox://styles/veleter/ck7xdy1yo1bkj1ipmsbhe9c96"
      mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
      onViewportChange={setViewport}
      onClick={showAddMarkerPopup}
    >
      {/* DATABASE LOADED MARKERS */}
      {logEntries.map(entry => (
        <React.Fragment key={entry._id}>
          <Marker latitude={entry.latitude} longitude={entry.longitude}>
            <div
              onClick={() =>
                setShowPopup({
                  ...showPopup,
                  [entry._id]: true
                })
              }
            >
              <svg
                className="marker yellow"
                style={{
                  height: `${6 * viewport.zoom}px`,
                  width: `${6 * viewport.zoom}px`
                }}
                version="1.1"
                id="Layer_1"
                x="0px"
                y="0px"
                viewBox="0 0 512 512"
              >
                <g>
                  <g>
                    <path
                      d="M256,0C153.755,0,70.573,83.182,70.573,185.426c0,126.888,165.939,313.167,173.004,321.035
                        c6.636,7.391,18.222,7.378,24.846,0c7.065-7.868,173.004-194.147,173.004-321.035C441.425,83.182,358.244,0,256,0z M256,278.719
                        c-51.442,0-93.292-41.851-93.292-93.293S204.559,92.134,256,92.134s93.291,41.851,93.291,93.293S307.441,278.719,256,278.719z"
                    />
                  </g>
                </g>
              </svg>
            </div>
          </Marker>
          {showPopup[entry._id] ? (
            <Popup
              latitude={entry.latitude}
              longitude={entry.longitude}
              closeButton={true}
              closeOnClick={false}
              dynamicPosition={true}
              onClose={() =>
                setShowPopup({
                  ...showPopup,
                  [entry._id]: false
                })
              }
              anchor="top"
            >
              <div className="popup">
                {/* <h3>{entry.title}</h3>
                <p>{entry.comments}</p>
                <p>
                  <b>Longitude: </b>
                  {entry.longitude}
                </p>
                <p>
                  <b>Latitude: </b>
                  {entry.latitude}
                </p>
                <small>
                  Ticket Placed:{" "}
                  {new Date(entry.visitDate).toLocaleDateString()}
                </small>
                {entry.image && <img src={entry.image} alt={entry.title} />} */}

                <Card elevation={3} className="p-4">
                  <div className="flex items-center">
                    <Fab
                      size="medium"
                      className="bg-light-error circle-44 box-shadow-none overflow-hidden"
                    >
                      <Icon className="text-error">star_outline</Icon>
                    </Fab>
                    <h5 className="font-medium text-error m-0 ml-3">
                      {entry.title}
                    </h5>
                  </div>
                  <div className="pt-4 flex items-center">
                    <h2 className="m-0 text-muted flex-grow"></h2>
                    <div className="ml-3 small-circle bg-error text-white"></div>
                    <span className="text-13">({entry.longitude})</span>
                    <span className="text-13">({entry.latitude})</span>
                  </div>
                </Card>
              </div>
            </Popup>
          ) : null}
        </React.Fragment>
      ))}

      {/* USER ADDED MARKER */}

      {userMarkers.map(userMarker => (
        <React.Fragment key={userMarker._id}>
          <Marker
            latitude={userMarker.lat}
            longitude={userMarker.long}
            draggable
            // onDragEnd={setUserMarkers}
          >
            <div
              onClick={() =>
                setShowUserPopup({
                  ...showUserPopup,
                  [userMarker._id]: true
                })
              }
            >
              <div>
                <svg
                  className="marker red"
                  style={{
                    height: `${6 * viewport.zoom}px`,
                    width: `${6 * viewport.zoom}px`
                  }}
                  version="1.1"
                  id="Layer_1"
                  x="0px"
                  y="0px"
                  viewBox="0 0 512 512"
                >
                  <g>
                    <g>
                      <path
                        d="M256,0C153.755,0,70.573,83.182,70.573,185.426c0,126.888,165.939,313.167,173.004,321.035
                        c6.636,7.391,18.222,7.378,24.846,0c7.065-7.868,173.004-194.147,173.004-321.035C441.425,83.182,358.244,0,256,0z M256,278.719
                        c-51.442,0-93.292-41.851-93.292-93.293S204.559,92.134,256,92.134s93.291,41.851,93.291,93.293S307.441,278.719,256,278.719z"
                      />
                    </g>
                  </g>
                </svg>
              </div>
            </div>
          </Marker>

          {showUserPopup[userMarker._id] ? (
            <Popup
              latitude={userMarker.lat}
              longitude={userMarker.long}
              closeButton={true}
              closeOnClick={false}
              dynamicPosition={true}
              onClose={() =>
                setShowUserPopup({
                  ...showUserPopup,
                  [userMarker._id]: false
                })
              }
              anchor="top"
            >
              <div className="popup">
                <LogEntryForm />
              </div>
            </Popup>
          ) : null}
        </React.Fragment>
      ))}
    </ReactMapGL>
  );
};
export default BasicMap;

Answer 1

错误来自于没有向市场传递准确的 ID。当您单击某个标记并将其设置为 true 时，您会对 map 上的所有标记执行此操作。

您需要做的是将 ID 传递给需要打开的元素(即模式)，然后使用 onClick 事件定位该 ID。

 onClick={e => {
      setShowPopup(e.currentTarget.id);
}}

然后要显示所需的元素，您应该将事件中的值与ID进行比较:

{userMarkersID === showUserPopup.id && (
      <div>Whatever you wanna show</div>
)}

其中 userMarkersID 是 map 上每个标记的 ID。希望有帮助