如何在 react-instantsearch-dom-maps 中移动地图时更改结果

Question

我目前正在使用 algolia，但我对地图有一些奇怪的问题。我有这个界面（左栏是结果，右栏是地图）就像这张图片：

当我试图拖动我的地图时，我得到了几秒钟的结果，我需要，但由于某种原因，它们重置为以前的结果 searchboxes.My 地图代码是这样的：

const Marker = ({ hit }: { hit: any }) => {
  const rHit = hit;
  return (
    <CustomMarker
      key={rHit.objectID}
      hit={rHit}
      anchor={{ x: 0, y: (rHit.position - rHit.count) * 50 }} // if there are several markers at the exact same position
    >
      <ArtistsMarker hit={rHit} />
    </CustomMarker>
  );
};

const Map: FC<MapProps> = ({ fullscreen }): ReactElement => {
  const [google, setGoogle] = useState<any>();

  useEffect(() => {
    if (window) {
      setGoogle(window.google);
    }
  }, []);

  const getKey = (hit: any): string => `${hit._geoloc.lat} ${hit._geoloc.lng}`;

  const groupThoseWithIdenticalCoordinates = (array: any[]) =>
    array.reduce((acc, value) => {
      if (!acc[getKey(value)]) {
        acc[getKey(value)] = [];
      }
      acc[getKey(value)].push(value);
      value.position = acc[getKey(value)].length;
      return acc;
    }, []);

  const addPositionForIdenticalCoordinates = (
    array: any[],
    grouped: any
  ): any[] =>
    array.map((e: any) => ({ ...e, count: grouped[getKey(e)].length }));

  return google ? (
    <GeoSearch
      google={google}
      enableRefine={true}
      enableRefineOnMapMove={true}
      maxZoom={17}
      gestureHandling={fullscreen ? 'cooperative' : 'greedy'}
    >
      {(value: any) => {
        const grouped = groupThoseWithIdenticalCoordinates(value.hits);
        const hits = addPositionForIdenticalCoordinates(value.hits, grouped);
        const markers = hits.map((hit: any) => (
          <Marker hit={hit} key={hit.uid} />
        ));
        return (
          <div>
            <Control />
            {markers}
          </div>
        );
      }}
    </GeoSearch>
  ) : (
    <></>
  );
};

export default Map;

我还注意到在我的控制台中，searchState 对象有时会像这样错过 boundingBox 对象：

也许有人知道它为什么会发生或者我应该去哪里搜索？

Answer 1

问题是由过滤器引起的。 IN 按位置过滤结果，这就是我返回到之前位置的原因。

如何在 react-instantsearch-dom-maps 中移动地图时更改结果

How to change results as far as I move map in react-instantsearch-dom-maps

google-maps

typescript

reactjs

algolia

react-instantsearch