如果位于视口边缘，悬停时 React-map-gl 弹出窗口也会弹出

Question

我正在使用 Uber 的 reac-map-gl 并使用弹出功能。从网站上截取的代码如下所示：

import {Component} from 'react';
import ReactMapGL, {Popup} from 'react-map-gl';

class Map extends Component {
  state = {
    showPopup: true
  };

  render() {
    const {showPopup} = this.state;
    return (
      <ReactMapGL latitude={37.78} longitude={-122.41} zoom={8}>
        {showPopup && <Popup
          latitude={37.78}
          longitude={-122.41}
          closeButton={true}
          closeOnClick={false}
          onClose={() => this.setState({showPopup: false})}
          anchor="top" >
          <div>You are here</div>
        </Popup>}
      </ReactMapGL>
    );
  }
}

我通过列出标记和弹出窗口以及 return 它们来修改代码。如果我将鼠标悬停在标记区域上，弹出窗口将专门显示，但是，这就是问题所在，如果我拿起地图并拖动它，使标记位于视口的边缘。

我的 CSS 看起来如下：

.mapboxgl-popup.mapboxgl-popup-anchor-top {
  opacity: 0;
}

.mapboxgl-popup.mapboxgl-popup-anchor-top:hover {
  opacity: 100%;
  width: 150px;
  height: 150px;
  opacity: 1;
}

Answer 1

我不确定为什么会这样，但是 Popup 组件似乎有一个与视图外的标记相关联的操作：

https://github.com/uber/react-map-gl/blob/master/docs/components/popup.md#dynamicposition-boolean---default-true

考虑将其设置为 false，以免触发他们的操作。

  <Popup
    latitude={37.78}
    longitude={-122.41}
    closeButton={true}
    closeOnClick={false}
    onClose={() => this.setState({showPopup: false})}
    anchor="top" 
    dynamicPosition={false}
  ></Popup>

此外，您并没有在悬停后删除弹出窗口，它们只是 opacity:0。 dynamicPosition 触发的动作可能会覆盖您的不透明度。您应该使用 JavaScript/React.

而不是使用 CSS 来显示和隐藏弹出窗口

如果位于视口边缘，悬停时 React-map-gl 弹出窗口也会弹出

React-map-gl Popups on hover also pops up if location on edge of viewport

javascript

ecmascript-6

reactjs

react-map-gl