Google Maps React Wrapper - 标记集群创建 @googlemaps/react-wrapper答案

【问题标题】：Google Maps React Wrapper - Marker Cluster create @googlemaps/react-wrapperGoogle Maps React Wrapper - 标记集群创建 @googlemaps/react-wrapper
【发布时间】：2022-10-21 06:55:37
【问题描述】：

我正在使用 Google ReactJS 库将地图添加到我的 React Web 应用程序中。 @googlemaps/react-wrapper 但我无法在包装器上进行标记聚类，请任何人知道

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>
    )
}

【问题讨论】：

查看here 以获得类似问题的可能解决方案，并查看here 官方文档
解决方案看起来很简单，看起来您需要做的就是将地图的引用 (googleMapRef) 和一组标记 (markerList) 提供给 MarkerClusterer 对象

标签： reactjs

【解决方案1】：

要创建集群器，您必须拥有一组标记。所以我建议将bounds.extend(marker.position); 移出markerList 映射并保存结果：

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

然后只需创建一个集群：

new MarkerClusterer({ googleMapRef, markers });

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

yarn add @googlemaps/markerclusterer

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

【讨论】：