0

我正在使用 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;
}
4

1 回答 1

2

我不确定为什么会发生这种情况，但 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 触发的动作会覆盖您的不透明度。你应该使用 JavaScript/React，而不是使用 CSS 来显示和隐藏弹出窗口。

于 2020-02-03T00:09:40.237 回答