使用@googlemaps/react-wrapper实现Marker Cluster遇阻求助

你的代码目前仅实现了单个标记的创建逻辑，未集成标记聚合相关功能。@googlemaps/react-wrapper仅负责加载Google Maps脚本，标记聚合需要借助官方提供的@googlemaps/markerclusterer库实现，具体解决方案如下：

步骤1：安装标记聚合依赖 #

首先安装官方标记聚合库：

npm install @googlemaps/markerclusterer
# 或使用yarn
yarn add @googlemaps/markerclusterer

步骤2：修改组件代码 #

更新MapContainer组件，引入聚合库并添加聚合逻辑：

import React, { useEffect, useRef } from "react";
import { Wrapper, Status } from "@googlemaps/react-wrapper";
import { MarkerClusterer } from "@googlemaps/markerclusterer"; // 新增聚合库引入

export default function MapContainer({ center, zoomLevel, markerList, icon }) {
    const googleMapRef = useRef(null);
    let googleMap = null;

    useEffect(() => {
        try {
            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) },
                icon: {
                    url: icon,
                    scaledSize: new window.google.maps.Size(80, 80)
                },
            });

            googleMap = initGoogleMap();
            let bounds = new window.google.maps.LatLngBounds();
            const markers = []; // 收集所有标记实例

            if (markerList.length > 0) {
                markerList.forEach(x => {
                    const marker = createMarker(x);
                    markers.push(marker);
                    bounds.extend(marker.position);
                });

                // 初始化标记聚合器
                new MarkerClusterer({
                    map: googleMap,
                    markers: markers,
                    // 可选：自定义聚合图标路径，比如使用官方示例图标
                    // imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"
                });

                googleMap.fitBounds(bounds);
            }
        } catch (e) {
            console.log("maps", e)
        }
    }, [center, zoomLevel, markerList, icon]) // 添加依赖项，避免无意义重渲染

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

    return (
        <div>
            <Wrapper apiKey={TOKEN} render={render}>
                <div ref={googleMapRef} style={{ width: "100%", height: "78vh" }} />
            </Wrapper>
        </div>
    )
}

关键修改说明 #

1. 引入聚合库：添加MarkerClusterer导入，实现标记聚合核心逻辑。
2. 收集标记实例：创建标记时存入数组，供聚合器统一处理。
3. 初始化聚合器：传入地图对象和标记数组，聚合器会自动根据缩放级别完成标记合并与展示。
4. 优化副作用依赖：添加组件props作为依赖，确保仅在参数变化时重新初始化地图。
5. 简化空列表逻辑：移除重复的地图初始化调用，避免资源浪费。

内容的提问来源于stack exchange，提问作者Iliyas Ahmed Farooqui