Reactjs中如何根据GoogleMap缩放级别控制Marker显示数量？

核心思路 #

别用DOM类名控制显示，直接根据当前地图缩放级别过滤要渲染的Marker数据——缩放级别越高（地图越近），显示的Marker越多。同时监听地图缩放变化，实时更新渲染的Marker集合。

具体实现步骤 #

1. 监听地图缩放变化 #

给<GoogleMap>添加缩放监听，获取当前缩放级别并更新组件状态：

import { useState, useRef } from 'react';

// 初始化缩放状态，用传入的zoom值
const [currentZoom, setCurrentZoom] = useState(zoom);
const mapRef = useRef(null);

// 监听缩放变化
const handleZoomChange = () => {
  if (mapRef.current) {
    setCurrentZoom(mapRef.current.getZoom());
  }
};

然后给<GoogleMap>绑定ref和监听事件：

<GoogleMap 
  ref={mapRef}
  zoom={currentZoom} 
  center={center} 
  mapContainerClassName="map-container"
  options={{
    restriction: {
      latLngBounds: azerbaijanBounds,
      strictBounds: false,
    },
  }}
  onZoomChanged={handleZoomChange}
>

2. 根据缩放级别过滤Marker数据 #

定义不同缩放级别的显示规则，比如：

• 缩放级别 < 10：只显示少量关键Marker
• 10 ≤ 缩放级别 < 15：显示半数Marker
• 缩放级别 ≥ 15：显示全部Marker

用useMemo缓存过滤结果，避免重复计算：

import { useMemo } from 'react';

const filteredMarkers = useMemo(() => {
  if (!data) return [];
  
  if (currentZoom >= 15) {
    return data; // 显示全部
  } else if (currentZoom >= 10) {
    // 显示一半，可按需改成按距离/优先级筛选
    return data.filter((_, index) => index % 2 === 0);
  } else {
    // 显示更少，比如每5个取1个
    return data.filter((_, index) => index % 5 === 0);
  }
}, [data, currentZoom]);

3. 渲染过滤后的Marker #

把原来的data.map替换成filteredMarkers.map：

{counter && filteredMarkers.length > 0 && filteredMarkers.map((loc) => (
  <div key={loc.id} className="custom-marker-wrapper">
    <Marker
      position={{ lat: loc.location[0], lng: loc.location[1] }}
      onClick={() => handleMarkerClick(loc)}
      icon={'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAq1BMVEUAAABl1o5m2Y1l141l141l141l141k2I5l141l141l1oxl141o2Ihl141l141m1406aqo/bahj14tl141l145k1o08bKk9bKk8a6lk141l141o3Is7bKc9a6k9bKk9a6k+ZaZXpptl2I48bKg9bKo/b6g9bKk8bKk8bKlk14w9a6k9bKk7bKw9bKlm1o09bKk9bKk+bKo9bao9bKg8bKc9bao9bKk9bKg5capaHh7zAAAAOXRSTlMAUQqs/ybVT/TMg58QtPlnMCst3OQ4ZPVZWMAWDaP/lwgEj9fKIPzsTjNFiRrAfdyCrD/dQLDQbRKMyS9lAAABDUlEQVR4Ac3PVWLDMBAE0IkzYWbeMDPa9z9ZV2qYforPbGkJ387nwzuOn/Q7eCkQpAoG8EIoTEYiZDiEp6IkY44TIxnFo3iCTKaQziCVJBNx3MnmyHwBxVKpjEKezGVxoxImq7V6Q1SzVauS4Qou2h2SnXamK1avf/yBo2NAsaSLg4HehqNjSlhjW7Jl03fTk6Goads2NYYRNE1/pm/Ugdlc1HxmxgrCiIUXKJv0pSKM9lTUcIJFOAar3WqKWqZxNBqablbtNo7SotZ1nPV7oja43jDHtdZWf+1uNuzt/7SCcXi+oS+q9X83zG83LB82yKpcLruiymoqDxseXW1oDeWJkoez3Xr+YD/BL/kATPEwwGzXEGUAAAAASUVORK5CYII='}
    >
      {loc.isOpen && loc.title && (
        <InfoWindowF onCloseClick={() => handleMarkerClose(loc)}>
          <div className='infoWindowDiv' onClick={(e) => { window.open(`https://example.com/item/${offerType}/${loc.id}`) }}>
            <span className='infoWindowTitle'>{loc.title}</span>
            <span className='infoWindowInfo'>Qiymet - <span className='infoWindowPrice'>{loc.price} AZN</span></span>
            <span className='infoWindowInfo'>Sahə - <span className='infoWindowPrice'>{loc.area} m <sup><small>2</small></sup></span></span>
            <span className='infoWindowInfo'>1kv/qiymet - <span className='infoWindowPrice'>{Math.round(loc.m2)} AZN</span></span>
          </div>
        </InfoWindowF>
      )}
    </Marker>
  </div>
))}

为什么之前加类名没效果？ #

用类名隐藏DOM只是视觉上消失，但Marker依然存在于地图实例中；而且如果没结合当前地图的视野范围计算距离，判断逻辑根本不准确。直接在数据层面过滤，只渲染需要显示的Marker，不仅性能更好，控制逻辑也更清晰。

进阶优化（可选） #

如果需要更智能的聚合（比如同一区域内只显示1个Marker，缩放后再展开更多），可以用@googlemaps/markerclusterer库，它会自动根据缩放级别和Marker密度聚合显示，避免地图拥挤。

内容的提问来源于stack exchange，提问作者Raul Orujov