如果位于视口边缘，悬停时也会弹出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>
    );
  }
}

我修改了代码，制作了一个标记和弹出列表并返回它们。如果我将鼠标悬停在标记区域上，弹出窗口只会显示出来，但这就是问题所在，如果我拿起地图并拖动它，使标记位于视口之外的边缘。

我的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>

此外，悬停后不会删除弹出窗口，它们只是不透明度:0。可能dynamicPosition触发的操作正在覆盖您的不透明度。不应该使用CSS来显示和隐藏弹出窗口，而应该使用JavaScript/React。