Блог

Таким образом, проблема в целом заключается в следующем: у меня есть карта, и когда я нажимаю на маркер, он должен отображать всплывающее окно с этими маркерами. Вместо этого он показывает все всплывающие окна с маркерами сразу. Аналогичная вещь происходит, когда я нажимаю «x», все всплывающие окна закрываются. Я хочу, чтобы он сделал следующее: когда я нажимаю на один маркер, открывается всплывающее окно с маркерами (например, с данными из базы данных mongodb).

Я могу успешно получить данные и все такое. Все данные кажутся правильными во всех всплывающих окнах, просто они появляются (каламбур) одновременно, а не только по одному.

Я полагаю, что это должно быть что-то с «setCurrentPlaceId». Или может быть что-то с {pins.map}? Я действительно растерян в этот момент, потому что я перепробовал все. Странно то, что я делал это с помощью учебника и даже пытался скопировать исходный код, но каждый раз получал одну и ту же проблему. Все всплывающие окна открываются при нажатии на один маркер, а не только на этот.

Я нашел аналогичную проблему на этом форуме, но, похоже, я не могу ее понять, и мне понадобится помощь на основе моего примера кода.

Большое вам спасибо!

Я считаю, что проблема должна быть в приведенных ниже кодах:

 import ReactMapGL, {Marker, Popup} from 'react-map-gl';
import {Room, Star} from "@material-ui/icons";
import "./App.css";
import axios from "axios";
import {format} from "timeago.js";
//NOTE: FOR MARKER ALWAYS SET OFFSETLEFT TO -MARKERWIDTH, OFFSETTOP TO -MARKERHEIGHT


function App() {
  const [pins, setPins] = useState([]);
  const [currentPlaceId, setCurrentPlaceId] = useState(null);
  const [viewport, setViewport] = useState({
    width: "100vw",
    height: "100vh",
    latitude: 0,
    longitude: 0,
    zoom: 1.5
  });

  useEffect(() => {
    const getPins = async () => {
      try {
        const allPins = await axios.get("/pins");
        setPins(allPins.data);
      } catch (err) {
        console.log(err);
      }
    };
    getPins();
  }, []);

  const handleMarkerClick = (id) => {
    setCurrentPlaceId(id);
  };

  return (
    <ReactMapGL
      {...viewport}
      mapboxApiAccessToken = {process.env.REACT_APP_MAPBOX}
      onViewportChange={nextViewport => setViewport(nextViewport)}
      mapStyle = "mapbox://styles/msude/ckwampov11d2q15odhnlp98v6"
      >
      {pins.map((p) => (
      <>
      <Marker latitude={p.lat} longitude={p.long} offsetLeft={-8} offsetTop={-12}> 
      <Room style={{fontSize:viewport.zoom *3, color: "blue"}} 
        onClick = {()=>handleMarkerClick(p._id)}
      />
      </Marker>
      {p._id === currentPlaceId amp;amp; (
      <Popup
        latitude={p.lat}
        longitude={p.long}
        closeButton={true}
        closeOnClick={true}
        anchor="left" 
        onClose={()=>setCurrentPlaceId(null)}
        >
        <div className="card">
          <label>Place</label>
          <h4 className="place">{p.title}</h4>
          <label>Review</label>
          <p className="desc">{p.desc}</p>
          <label>Rating</label>
          <div className="stars">
          <Star className="star"/>
          <Star className="star"/>
          <Star className="star"/>
          <Star className="star"/>
          <Star className="star"/>
          </div>
          <label>Information</label>
          <span classname="username">Created by <b>{p.username}</b></span>
          <span className="date">{format(p.createdAt)}</span>
        </div>
        </Popup>
      )}
        </>
      ))}
    </ReactMapGL>
    
  );
}

export default App; ```