在 Mapbox GL 中悬停属性全屏预览图像以覆盖整个地图

Question

目前我有一个带标记的 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 && (
      <div className="map">
      <ReactMapGL
      scrollZoom="false"
        {...viewport}
        mapboxApiAccessToken="//myAPIkey"
        mapStyle="mapbox://styles/jay5053/cks5xkaa892cp17o5hyxcuu0z"
        onViewportChange={(viewport) => {
          setViewport(viewport);
        }}
      >
        {posts &&
          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 && isPopupShown && (
        <div className="full-popup">
          // todo: Have the fullscreen as a hover to close it?
        </div>
      )}
    </div>

      </>
      
  );
}

我添加了一个沙箱供大家参考：https://codesandbox.io/s/full-popup-mapbox-Whosebug-forked-myu0i

Answer 1

您可以使用 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-Whosebug-forked-srfvp?file=/src/App.js

在 Mapbox GL 中悬停属性全屏预览图像以覆盖整个地图

Having a Fullscreen preview image onHover property in Mapbox GL to cover entire map

javascript

mapbox

reactjs

在 Mapbox GL 中悬停 属性 全屏预览图像以覆盖整个地图

Having a Fullscreen preview image onHover property in Mapbox GL to cover entire map

javascript

mapbox

reactjs

在 Mapbox GL 中悬停属性全屏预览图像以覆盖整个地图