Google Maps API v3 Noop 算法 (MarkerClusterer) 不起作用

Question

我正在尝试通过内置标记聚类算法渲染约 2000 个谷歌地图标记。

GridAlgorithm

和

SuperClusterAlgorithm

工作正常并渲染集群，但

NoopAlgorithm

的预期行为是仅渲染地图上的所有标记而不进行聚类，因此不会渲染任何标记。与其他 2 种功能算法相比，没有控制台错误，并且在

Noop

设置下地图渲染速度非常快

我正在使用 npm 库

"@googlemaps/markerclusterer": "^2.4.0"

来实现

markerclusterer

和算法，并使用

"@react-google-maps/api": "^2.19.2"

来加载 Google 地图界面

代码：

/* eslint-disable react-hooks/exhaustive-deps */
import { useEffect, useState, useCallback } from "react";
import { GoogleMap, LoadScriptNext } from "@react-google-maps/api";
import Styles from "@/public/resources/maps.json";
import {
  GridAlgorithm,
  MarkerClusterer,
  NoopAlgorithm,
  SuperClusterAlgorithm,
} from "@googlemaps/markerclusterer";

let taxiMarkers: any = [];
let markerCluster: any = null;

const libraries = ["places", "geometry"];
export let pickupRoute: any;
export let dropRoute: any;

export default function Simulation() {
  const [mapRef, setMapRef] = useState<google.maps.Map>();
  const [isLoading, setIsLoading] = useState(true);
  const useGrid = () => loadTaxis(new GridAlgorithm({}));
  const useNoop = () => loadTaxis(new NoopAlgorithm({}));
  const useSuper = () => loadTaxis(new SuperClusterAlgorithm({}));

  // On map load... set location to current location
  const loadMap = useCallback(function callback(map: google.maps.Map) {
    setMapRef(map);
    navigator.geolocation.getCurrentPosition((position) => {
      const currLocation = new google.maps.LatLng(
        position.coords.latitude,
        position.coords.longitude
      );

      map.panTo(currLocation);
      map.setZoom(14);

      setIsLoading(false);
    });
  }, []);

  useEffect(() => {
    if (isLoading) return;
    loadTaxis(new GridAlgorithm({}));
  }, [isLoading]);

  const loadTaxis = (algorithm: any) => {
    let newTaxi;
    clearTaxis();

    fetch("https://api.data.gov.sg/v1/transport/taxi-availability")
      .then(function (response) {
        return response.json();
      })
      .then(function (data) {
        const coordinates = data.features[0].geometry.coordinates;
        const markers = coordinates.map((coord: number[], index: number) => {
          newTaxi = new google.maps.Marker({
            position: new google.maps.LatLng(coord[1], coord[0]),
            title: (index + 1).toString(),
            icon: {
              path: google.maps.SymbolPath.CIRCLE,
              scale: 3,
            },
            optimized: true,
          });
          taxiMarkers.push(newTaxi);
          return newTaxi;
        });
        markerCluster = new MarkerClusterer({
          map: mapRef,
          markers: markers,
          algorithm: algorithm,
        });
      });
  };

  const clearTaxis = () => {
    if (taxiMarkers.length !== 0) {
      for (let i = 0; i < taxiMarkers.length; i++) {
        taxiMarkers[i].setMap(null);
      }
      taxiMarkers = [];
      markerCluster?.clearMarkers();
    }
  };

  return (
    <LoadScriptNext
      googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY as string}
      libraries={libraries as any}
    >
      <div className="absolute top-0 left-0 h-screen w-screen">
        <GoogleMap
          zoom={15}
          mapContainerStyle={{ width: "100%", height: "100%" }}
          options={{
            zoomControl: false,
            streetViewControl: false,
            mapTypeControl: false,
            fullscreenControl: false,
            minZoom: 3,
            styles: Styles,
          }}
          onLoad={loadMap}
        />
        <div className="absolute bottom-0 left-0 m-5 space-x-3">
          <button onClick={useGrid}>Grid</button>
          <button onClick={useNoop}>Noop</button>
          <button onClick={useSuper}>Super</button>
        </div>
      </div>
    </LoadScriptNext>
  );
}

编辑：根据比较算法的官方文档（https://googlemaps.github.io/js-markerclusterer/public/algorithms/），我尝试了简单的

new NoopAlgorithm()

，没有大括号，但它仍然有效不行。这也会在 IDE 中呈现警告：

Expected 1 arguments, but got 0

Answer 1

尝试使用

GridAlgorithm({maxZoom: 0})

而不是

NoopAlgorithm

。标记不会聚集在 maxZoom 及以上。