在Mapbox GL中有一个全屏预览图像的onHover属性来覆盖整个地图

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-stackoverflow-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-stackoverflow-forked-srfvp?file=/src/App.js