Блог

В настоящее время у меня есть компонент ReactMapboxGL с маркерами. У этих маркеров есть функция OnMouseEnter, которая выводит всплывающее окно в полноэкранном режиме на мой экран, но это не то, что я хочу. В настоящее время я пытаюсь воспроизвести этот дизайн с помощью своих маркеров (http://www.francoisrisoud.com/projects), где при наведении указателя мыши на точку отображается изображение предварительного просмотра в полноэкранном режиме, и только при нажатии на него он перейдет на эту конкретную страницу.

В настоящее время это мой код:

 export default function Map({ posts }) {
  const [viewport, setViewport] = useState({
    latitude: 36.592206968562685,
    longitude: 3.332469343750031,
    width: "100%",
    height: "100vh",
    zoom: 1.3,
    scrollZoom: "false",
    
  });

  const [selectedProperty, setSelectedProperty] = useState(null);
  const [isPopupShown, setIsPopupShown] = useState(false);

  return (
    <>
    <div className="root">
    {!isPopupShown amp;amp; (
      <div className="map">
      <ReactMapGL
      scrollZoom="false"
        {...viewport}
        mapboxApiAccessToken="//myAPIkey"
        mapStyle="mapbox://styles/jay5053/cks5xkaa892cp17o5hyxcuu0z"
        onViewportChange={(viewport) => {
          setViewport(viewport);
        }}
      >
        {posts amp;amp;
          posts.map((maps) => (
            <Marker
              key={maps.id}
              latitude={maps.Latitude}
              longitude={maps.Longitude}
            >
              <button
                    className="marker-btn"
                    onMouseEnter={() => {
                      setSelectedProperty(maps);
                      setViewport({
                        latitude: 36.592206968562685,
                        longitude: 3.332469343750031,
                        width: "0vw",
                        height: "0vh",
                        zoom: 1.3
                      });
                      setIsPopupShown(true);
                    }}
                  >
                <img src="placeholder.svg" />
              </button>
            </Marker>
          ))}
          </ReactMapGL>
        </div>
      )}

      {selectedProperty amp;amp; isPopupShown amp;amp; (
        <div className="full-popup">
          // todo: Have the fullscreen as a hover to close it?
        </div>
      )}
    </div>

      </>
      
  );
}
 

Я добавил безопасную среду для справки, если кто-то хочет ее протестировать: https://codesandbox.io/s/full-popup-mapbox-stackoverflow-forked-myu0i

Вы можете использовать HTMLOverlay

 
          <HTMLOverlay
            redraw={(props) => {
              return (
                <div
                  style={{
                    backgroundColor: "rgba(255, 0, 0, 0.5)",
                    width: isPopupShown ? props.width : 0,
                    height: isPopupShown ? props.height : 0,
                    transition: "all .2s ease-in-out",
                    transform: "scale(1.1)",
                    overflow: "hidden",
                    alignItems: "center",
                    justifyContent: "center"
                  }}
                >
                  <h1>Text</h1>
                </div>
              );
            }}
          />

 

Разветвил вашу песочницу, чтобы создать рабочий пример: https://codesandbox.io/s/full-popup-mapbox-stackoverflow-forked-srfvp?file=/src/App.js