googlemaps反应包装-标记群集创建@googlemaps/ React包装器

Question

我使用Google ReactJS库将地图添加到我的React应用程序中，并使用@googlemaps/react库来聚类标记。但我无法在包装器上进行标记聚类。如果有人知道，请帮我解决这个问题。组件代码如下：

import React, { useEffect, useRef } from "react";
import { Wrapper, Status } from "@googlemaps/react-wrapper";

export default function MapContainer({ center, zoomLevel, markerList, icon }) {

    const googleMapRef = useRef(null);
    let googleMap = null;

    useEffect(() => {
        try {
            let bounds = new window.google.maps.LatLngBounds();

            const initGoogleMap = () => {
                return new window.google.maps.Map(googleMapRef.current, {
                    center: center,
                    zoom: zoomLevel,
                    styles: [{ stylers: [{ saturation: -100 }] }]
                });
            }

            const createMarker = (markerObj) => new window.google.maps.Marker({
                position: { lat: parseFloat(markerObj.lat), lng: parseFloat(markerObj.lng) },
                map: googleMap,
                icon: {
                    url: icon,
                    scaledSize: new window.google.maps.Size(80, 80)
                },
            });

            googleMap = initGoogleMap();

            markerList.map(x => {
                const marker = createMarker(x);
                bounds.extend(marker.position);
            });

            if (markerList.length === 0) {
                initGoogleMap();
                bounds = new window.google.maps.LatLngBounds();
            }
            googleMap.fitBounds(bounds);
        }
        catch (e) {
            console.log("maps", e)
        }
    })

    const render = (status) => {
        if (status === Status.LOADING) return "Loading...";
        if (status === Status.FAILURE) return "Error";
        return null;
    };

    return (
        <div>
            <div>
                <Wrapper apiKey={TOKEN} render={render}>
                    {/* <GISTrackingMap zoomLevel={props.zoomLevel} mapFilterByVal={props.mapFilterByVal} center={props.center} gisTrackingData={props.gisTrackingData} /> */}
                    <div ref={googleMapRef} style={{ width: "100%", height: "78vh" }} />
                </Wrapper>
            </div>
        </div>
    )
}

Answer 1

要创建一个集群器，必须有一系列标记。因此，我建议将bounds.extend(marker.position);从markerList映射中移出并保存结果：

const markers = markerList.map(x => {
  createMarker(x);
});

然后创建一个集群：

new MarkerClusterer({ googleMapRef, markers });

UPD看起来MarkerClusterer不适用于ref，因此上面的代码应该按如下方式更改：

new MarkerClusterer({ googleMap, markers });

不要忘记安装库并添加导入：

yarn add @googlemaps/markerclusterer

import { MarkerClusterer } from '@googlemaps/markerclusterer';