Как удалить все маркеры без каких-либо побочных эффектов в реакции-Google-карта? - PullRequest
Новая
       39

Как удалить все маркеры без каких-либо побочных эффектов в реакции-Google-карта?

0 голосов
/ 17 апреля 2019

Я работаю с компонентом реагировать-google-maps.

Поскольку у меня много маркеров для отображения на карте Google, я использовал MarkerClusterer.

Я могу выбрать или отменить выборстрок в таблице ag-grid, чтобы сделать маркер показанным на реагировать-google-map.

Если я выберу все, все маркеры будут включены в флажокIP, а если отменить выбор всего, все маркеры будут удалены из флажка.1007 *

Компонент MapWithMarkers показывает только маркеры в зарегистрированном IP-адресе.

Теперь добавление маркеров работает нормально, но удаление маркеров (отмена выбора из таблицы ag-grid) не работает, как я ожидал.

Это занимает много времени.

https://imgur.com/mTS9jcS

Пожалуйста, помогите мне с этой проблемой.Код ниже. 

const MapWithMarkers = compose(
  withStateHandlers(
    () => ({
      isOpen: -1
    }),
    {
      onToggleOpen: ({ isOpen }) => index => {
        return {
          isOpen: isOpen === index ? -1 : index
        };
      },
      handleMapClick: () => () => {
        return {
          isOpen: -1
        };
      },
      onMarkerClustererClick: () => markerClusterer => {}
    }
  ),
  withScriptjs,
  withGoogleMap
)(props => {
  return (
    <GoogleMap
      defaultZoom={props.zoomLevel}
      defaultCenter={props.center}
      onClick={props.handleMapClick}
    >
      {props.checkedIPs.length !== 0 ? (
        <MarkerClusterer
          onClick={props.onMarkerClustererClick}
          enableRetinaIcons
          gridSize={50}
        >
          {props.cache.map((location, index) => {
            if (props.checkedIPs.includes(location.ipAddress)) {
              return (
                <Marker
                  key={index}
                  position={{ lat: location.latitude, lng: location.longitude }}
                  onClick={() => props.onToggleOpen(index)}
                >
                  {props.isOpen === index && (
                    <InfoWindow
                      position={{
                        lat: location.latitude,
                        lng: location.longitude
                      }}
                      onCloseClick={() => props.onToggleOpen(index)}
                    >
                      <div>
                        <h6>IP Address: {location.ipAddress}</h6>
                      </div>
                    </InfoWindow>
                  )}
                </Marker>
              );
            }
          })}
        </MarkerClusterer>
      ) : (
        <MarkerClusterer />
      )}
    </GoogleMap>
  );
});

export default class MapContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      zoomLevel: 2,
      center: { lat: 14.397, lng: 160.644 },
      markers: [],
      checkedIPs: [],
      isOpen: -1
    };
  }

  componentWillReceiveProps(nextProps) {
    const { cache, checkedIPs } = nextProps;
    this.setState({
      markers: cache,
      checkedIPs: checkedIPs
    });
  }

  render() {
    return (
      <MapWithMarkers
        googleMapURL="..."
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: `100%`, width: `100%` }} />}
        mapElement={<div style={{ height: `100%` }} />}
        cache={this.state.markers}
        checkedIPs={this.state.checkedIPs}
        zoomLevel={this.state.zoomLevel}
        center={this.state.center}
      />
    );
  }
}
`````````



All markers should be removed very fast without any effect, 
but currently, as I navigate all markers and check if it is contained in checkedIPs, it stops for a while and then disappear.
...