React 中的 Google 地图 MarkerClusterer 与 @react-google-maps/api

Question

我想从 @react-google-maps/api 实现 MarkerClusterer 时遇到错误。

我遇到的错误是

没有重载与此调用匹配。 重载第 1 个（共 2 个）“（props：MarkerClustererProps | Readonly）：ClustererComponent”出现以下错误。 类型“Element[]”缺少类型“ReactElement”中的以下属性：类型、道具、键 重载 2 个（共 2 个）“（props：MarkerClustererProps，上下文：any）：ClustererComponent”出现以下错误。 类型“Element[]”不可分配给类型“Element”.ts(2769) index.d.ts(378, 15)：预期类型来自此签名的返回类型。 index.d.ts(378, 15)：期望的类型来自该签名的返回类型。

您可以检查以下代码。 （我只分享整个代码的相关部分）

import React, { useEffect, useState, useRef } from 'react';
import { GoogleMap, useJsApiLoader, Marker, MARKER_LAYER, OverlayView, MarkerClusterer } from '@react-google-maps/api';
import './app.css';
import PlacesAutocomplete from './components/PlacesAutocomplete';


const containerStyle = {
    width: '100vw',
    height: '100vh',
};


const App = () => {
    const [center, setCenter] = useState({ lat: 39.015137, lng: 34.97953 });
    const [zoom, setZoom] = useState(6);
    const [markers, setMarkers] = useState<{ id: string; name: string; avatar: string; latLng?: google.maps.LatLng }[]>([]);
    const [users, setUsers] = useState<{ id: string; name: string; role: string; avatar: string; color: string; latLng: boolean }[]>([]);

    const mounted = useRef(false);
    const markerRef = useRef<Marker>(null);

    const { isLoaded } = useJsApiLoader({
        id: 'google-map-script',
        googleMapsApiKey: 'API_KEY',
        libraries: ['places'],
    });

    let markersInfo: { id: string; name: string; avatar: string; latLng?: google.maps.LatLng }[] = [];

    return isLoaded ? (
        <>
            <PlacesAutocomplete setCenter={setCenter} setZoom={setZoom} />
            <GoogleMap mapContainerStyle={containerStyle} center={center} zoom={zoom} onClick={handleAddMarker}>
                <>
                    <OverlayView
                        position={{ lat: -34.397, lng: 150.644 }}
                        mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
                    >
                        <>
                            <MarkerClusterer>
                              {clusterer => markers?.map((obj: any, i) => (
                                <Marker
                                    onClick={handleMarkerHover}
                                    ref={markerRef}
                                    key={i}
                                    position={obj.latLng}
                                    label={{
                                        // text: obj.name,
                                        text: obj.avatar
                                            ? obj.name
                                            : obj.name
                                                  .split(' ')
                                                  .map((name: string) => name[0])
                                                  .join('')
                                                  .toUpperCase(),
                                        className: obj.avatar ? `marker-label-with-avatar` : 'marker-label-without-avatar',
                                    }}
                                    icon={{
                                        scaledSize: new google.maps.Size(50, 50),
                                        url: obj.avatar ? obj.avatar + '#custom_marker' : 'avatar_default.png' + '#custom_marker_w/o_avatar',
                                        origin: new google.maps.Point(0, 0),
                                        anchor: new google.maps.Point(25, 50),
                                    }}
                                    animation={google.maps.Animation.DROP}
                                    // draggable={true}
                                />
                            ))}
                            </MarkerClusterer>
                        </>
                    </OverlayView>
                </>
            </GoogleMap>
        </>
    ) : (
        <></>
    );
};

export default React.memo(App); 

Answer 1

函数（clusterer：Clusterer）的预期返回是一个 JSX.Element。所以我建议进行以下更改：

          <MarkerClusterer>
        {(clusterer) => (
          <div>
            {markers?.map((obj: any, i) => (
              <Marker
                onClick={handleMarkerHover}
                ref={markerRef}
                key={i}
                position={obj.latLng}
                label={{
                  // text: obj.name,
                  text: obj.avatar
                    ? obj.name
                    : obj.name
                        .split(' ')
                        .map((name: string) => name[0])
                        .join('')
                        .toUpperCase(),
                  className: obj.avatar ? `marker-label-with-avatar` : 'marker-label-without-avatar',
                }}
                icon={{
                  scaledSize: new google.maps.Size(50, 50),
                  url: obj.avatar
                    ? obj.avatar + '#custom_marker'
                    : 'avatar_default.png' + '#custom_marker_w/o_avatar',
                  origin: new google.maps.Point(0, 0),
                  anchor: new google.maps.Point(25, 50),
                }}
                animation={google.maps.Animation.DROP}
                // draggable={true}
              />
            ))}
          </div>
        )}
      </MarkerClusterer>

Answer 2

如何更改单击时 MarkerCluster 的图标/样式？