React-map-gl Всплывающие окна при наведении также появляются, если расположение на краю области просмотра - PullRequest
Новая
       1

React-map-gl Всплывающие окна при наведении также появляются, если расположение на краю области просмотра

0 голосов
/ 03 февраля 2020

Я использую Uber Rea c -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;
}

1 Ответ

0 голосов
/ 03 февраля 2020

Я не уверен, почему это происходит, но компонент 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.

...