Question

我正在使用react-google-maps组件。

由于我要在Google地图上显示很多标记，因此我使用了MarkerClusterer。

我可以在ag-grid表中选择或取消选择行，以使标记显示在react-google-map上。

如果我全选，则所有标记都包含在选中的IP中；如果我取消全选，则所有标记都将从选中的IP中删除。

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.

如何在react-google-map中删除所有标记而没有任何副作用？

0 个答案: