MarkerClusterer 错误@react-google-maps/api

Question

我在我的 React + Typescript 项目中使用@react-google-maps/api。我有一个场景，其中 4 个标记具有完全相同的纬度和经度。我尝试使用 @react-google-maps/api 文档实现 MarkerClusterer。但这似乎不起作用。现场演示也有错误。现在有人在使用来自@react-google-maps/api 的 MarkerClusterer 吗？

这是我的代码：

"""

import { MarkerClusterer, MarkerF } from '@react-google-maps/api';
import React, { useMemo } from 'react';

const MapPage: React.FC = () => {

const center = useMemo(() => ({ lat: 40, lng: 40 }), []);

const [sites] = useFetch(siteApi.fetchMany);

const hasLongLat = (
    site: SiteList
): site is SiteList & { latitude: number; longitude: number } => {
    return site.latitude != null && site.latitude != null;
};

const filterSites = (sites: SiteList[] | undefined) => sites?.filter(hasLongLat) || [];


return(
            <Map
                mapContainerStyle={{ width: '100%', height: '100%' }}
                center={center}
                zoom={3}
                options={{ mapId: '974985be16ec33a2' }}
            >
                <MarkerClusterer averageCenter enableRetinaIcons gridSize={30}>
                    {filterSites(sites).map((site) => (
                        <MarkerF
                            key={site.id}
                            position={{
                                lat: site.latitude,
                                lng: site.longitude
                            }}
                        />
                    ))}
                </MarkerClusterer>
            </Map>
      );

}; 

"""

Answer 1

我现在得到完全相同的错误。我和你一样使用@react-google-maps/api。你找到解决这个问题的方法了吗？如果你能帮助我，我将非常感激。

谢谢。