MapConductorDocumentación / Extensiones / Agrupación de marcadores
Colocar muchos marcadores
Agrupa automáticamente los marcadores cercanos en clústeres y los expande al hacer zoom. Funciona con el mismo código en las vistas de mapas de cualquier proveedor.
ANDROID
com.mapconductor:marker-clustering
iOS
MapConductorMarkerCluster
REACT
@mapconductor/react-marker-clustering
01 · Instalación
app/build.gradle.kts
implementation("com.mapconductor:marker-clustering")Package.swift
.package(url: "https://github.com/MapConductor/ios-marker-cluster", from: "1.3.1"), .product(name: "MapConductorMarkerCluster", package: "ios-marker-cluster"),
terminal
npm install @mapconductor/react-marker-clustering
02 · Uso
Simplemente pase una matriz de marcadores a un grupo de clústeres. Los objetos de estado de los marcadores son los mismos que los habituales, no es necesario modificarlos.
ClusteredMap.kt · Jetpack Compose
val markerStates: List<MarkerState> = remember { buildMarkerList() }
val clusterState = remember {
MarkerClusterGroupState(
clusterRadiusPx = 90.0,
minClusterSize = 5,
onClusterClick = { cluster -> /* handle tap */ },
)
}
MapLibreMapView(state = mapState) {
MarkerClusterGroup(state = clusterState, markers = markerStates)
}ClusteredMap.swift · SwiftUI
@State private var clusterState = MarkerClusterGroupState(
clusterRadiusPx: 90,
minClusterSize: 5,
onClusterClick: { cluster in /* handle tap */ }
)
MapLibreMapView(state: mapState) {
MarkerClusterGroup(state: clusterState, markers: markerStates)
}ClusteredMap.tsx · React
import { MarkerClusterGroup } from '@mapconductor/react-marker-clustering';
import { MapLibreMapView2D, useMapLibreViewState } from '@mapconductor/react-for-maplibre';
<MapLibreMapView2D state={state}>
<MarkerClusterGroup
markers={markers}
minClusterSize={2}
clusterRadiusPx={80}
enableZoomAnimation
onClusterClick={cluster => console.log(cluster.count)}
/>
</MapLibreMapView2D>03 · Opciones principales
Option
Default
Descripción
clusterRadiusPx
90.0
Distancia para agrupar en clústeres (píxeles de pantalla). Si se reduce, la división será más detallada.
minClusterSize
3
Número mínimo de marcadores para mostrarlos como clúster. Por debajo de esto, se mantienen como marcadores individuales.
clusterIconProvider
circle badge
Devuelve un icono según el número de clústeres. El valor predeterminado es una insignia circular.
onClusterClick
null
Recibe toques en los clústeres. Por lo general, se usa para hacer zoom.
enableZoomAnimation
false
Activar/Desactivar la animación de expandir/agrupar al hacer zoom. De forma predeterminada está desactivada. Ajuste la duración con zoomAnimationDurationMs (predeterminado 300 ms).
04 · Rendimiento
Incluso con varios miles, fluido
La agrupación se calcula en segundo plano y solo se reestructura cuando la cámara se detiene.
SAMPLE
24,526