html - ReactMapGL 上的 onHover 效果无法正确缩放

Question

目前我正在尝试在我的 map 组件上复制此网站的悬停效果:http://www.francoisrisoud.com/projects基本上，当您将鼠标悬停在一个点上时，它会显示一个全屏图像，当您单击它时，它会将您带到特定页面。目前这是我的 React 和 CSS 代码:

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

    const [selectedProperty, setSelectedProperty] = useState(null)

  return (
      <div>
        <ReactMapGL {...viewport} mapboxApiAccessToken="//myAPIkey"
        mapStyle="mapbox://styles/jay/cks5xkaa892cp17o5hyxcuu0z"
        onViewportChange={viewport => {
            setViewport(viewport);
        }}>
        {
          posts &&
          posts.map((maps) => (
            <Marker key={maps.id} latitude={maps.Latitude} longitude={maps.Longitude}>
                {/* <div>{maps.Title}</div> */}
                <button className="marker-btn" onClick={e => {
                    e.preventDefault();
                    setSelectedProperty(maps);
                }}>
                    <img src="placeholder.svg"/>
                </button>
            </Marker>
          ))}

          {selectedProperty ? (
              <Popup latitude={selectedProperty.Latitude} longitude={selectedProperty.Longitude} 
              onClose={() => {setSelectedProperty(null);}}>
                <h1>{selectedProperty.Title}</h1>
              </Popup>) : null}
        </ReactMapGL> 
      </div>
    );
}

CSS:

.marker-btn{
  background: none;
  border: none;
  cursor: pointer;
}

.marker-btn :hover{
  background: #000;
  width: 100vw;
  height: 100vh;
  border: none;
  cursor: pointer;
}

.marker-btn img{
  width: 20px;
  height: 20px;
}

但是当我将鼠标悬停在 map 中的标记上时，我得到的结果是:

我想要它覆盖我的整个 map ，而不仅仅是从我悬停的地方开始。此外，如果我将鼠标悬停在它之外，我希望它消失，但是当我将光标拖向大弹出窗口时，它不会消失。

Answer 1

有很多方法可以做到这一点。这是我的:

替换 onClick Prop 和hover Marker 中按钮的伪类onMouseEnter 的组件支柱。

创建您自己的Popup具有父组件的完整高度和宽度。

隐藏Map组件(通过将视口(viewport)的宽度和高度设置为 0%)并显示自定义 Popup鼠标进入按钮时的组件，反之亦然。

这是工作代码 https://codesandbox.io/s/full-popup-mapbox-stackoverflow-36oi0?file=/src/App.js
注意:您必须附加您自己的 Mapbox token 。你可以从这里得到它 https://account.mapbox.com/access-tokens/

import React, { useState } from "react";
import ReactMapGL, { Marker } from "react-map-gl";
import "./styles.css";

export default function App() {
  const [viewport, setViewport] = useState({
    latitude: 50.826758,
    longitude: 4.380197,
    width: "100vw",
    height: "100vh",
    zoom: 3
  });

  const YOURMAPBOXTOKEN = "";

  const posts = [
    {
      id: 1,
      latitude: 50.826758,
      longitude: 4.380197
    },
    {
      id: 2,
      latitude: 48.893615,
      longitude: 2.490906
    },
    {
      id: 3,
      latitude: 51.454007,
      longitude: -0.235523
    }
  ];

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

  return (
    <div className="root">
      {!isPopupShown && (
        <div className="map">
          <ReactMapGL
            {...viewport}
            mapboxApiAccessToken={YOURMAPBOXTOKEN}
            mapStyle="mapbox://styles/mapbox/dark-v9"
            onViewportChange={(viewport) => {
              setViewport(viewport);
            }}
          >
            {posts &&
              posts.map((item) => (
                <Marker
                  key={item.id}
                  latitude={item.latitude}
                  longitude={item.longitude}
                >
                  <button
                    className="marker-btn"
                    onMouseEnter={() => {
                      setSelectedProperty(item);
                      setViewport({
                        latitude: 50.826758,
                        longitude: 4.380197,
                        width: "0vw",
                        height: "0vh",
                        zoom: 3
                      });
                      setIsPopupShown(true);
                    }}
                  >
                    <img src="placeholder.svg" />
                  </button>
                </Marker>
              ))}
          </ReactMapGL>
        </div>
      )}

      {/* SHOW FULL CUSTOM POPUP HERE */}
      {selectedProperty && isPopupShown && (
        <div className="full-popup">
          // todo: create a closing popup button here
        </div>
      )}
    </div>
  );
}

待办事项:您必须为自定义 Popup 创建一个关闭弹出按钮.
您可以通过反转我的代码来做到这一点:

设置 selectedProperty进入 null .

设置 isPopupShown进入 false .

将视口(viewport)的宽度和高度设置为 100%。