MapConductorMarcador
Para un marcador, simplemente cree un objeto de estado y colóquelo en la vista del mapa. El dibujo lo maneja el motor de renderizado dentro del SDK, que cambia automáticamente el método de dibujo según la cantidad. De manera predeterminada, hasta 2.000 elementos son los marcadores estándar de cada SDK de mapa; más allá de eso, son teselas ráster. Este valor umbral se puede cambiar pasando una opción de dibujo de teselas a la vista del mapa.
01 · Estado del marcador
MarkerState representa un solo marcador. Tiene posición, ícono, eventos y datos adjuntos arbitrarios; si se modifican las propiedades, se reflejan de inmediato. No hay tipos específicos del proveedor.
val marker =
MarkerState(
position = GeoPoint.fromLatLong(21.3069, -157.8583),
icon = DefaultMarkerIcon(fillColor = Color.Red, label = "A"),
extra = postOffice,
onClick = { clicked -> viewModel.onMarkerClick(clicked) },
)
// Assigning to a property is all it takes to redraw
marker.position = nextPointlet marker = MarkerState(
position: GeoPoint.fromLatLong(latitude: 21.3069, longitude: -157.8583),
icon: DefaultMarkerIcon(fillColor: .red, label: "A"),
extra: postOffice,
onClick: { clicked in viewModel.onMarkerClick(clicked) }
)
content.markers = markerStates.map { Marker(state: $0) }const marker = createMarkerState({
id: 'post-office-1',
position: createGeoPoint({ latitude: 21.3069, longitude: -157.8583 }),
icon: new ColorDefaultIcon({ fillColor: '#e74c3c', label: 'A' }),
extra: postOffice,
onClick: setSelected,
});
<Markers states={markerStates} />02 · Ícono
Desde simplemente especificar color y etiqueta en el pin predeterminado hasta imágenes, lienzos e íconos de tipo bocadillo. Todos los íconos tienen el mismo aspecto en todos los proveedores.
03 · Motor de renderizado interno
El dibujo de marcadores se deja al motor de renderizado interno del SDK. Mientras la cantidad es pequeña, se usan directamente los marcadores estándar de cada SDK de mapa, aprovechando al máximo la detección de toque nativa y las animaciones.
Cuando los marcadores superan los 2.000, el motor cambia la forma de dibujo. El grupo de marcadores se representa como una imagen de tesela y se superpone como una capa ráster, eliminando el costo de agregar y actualizar uno por uno en el SDK nativo. El código del lado de la aplicación no cambia en nada.
Marcadores nativos
Teselas ráster
// On by default; pass it to the map view to change the threshold
// (the Android parameter is called markerTiling)
val markerTiling =
MarkerTilingOptions.Default.copy(
minMarkerCount = 500, // switch to tile rendering from 500 markers
iconScaleCallback = { _, zoom ->
if (zoom > 10) 0.8 else if (zoom > 5) 0.5 else 0.2
},
)
GoogleMapView(state = mapViewState, markerTiling = markerTiling) { /* markers */ }
// Disable it to keep native markers at any count
val plain = MarkerTilingOptions.Disabledvar content = MapViewContent()
content.markerTilingOptions = MarkerTilingOptions(
minMarkerCount: 500, // switch to tile rendering from 500 markers
iconScaleCallback: { _, zoom in
PostOfficeViewModel.iconScale(zoom: zoom)
}
)
content.markers = markers.map { Marker(state: $0) }const MARKER_TILING_OPTIONS: MarkerTilingOptions = {
...MarkerTilingOptions.Default,
minMarkerCount: 500, // switch to tile rendering from 500 markers
iconScaleCallback: (_state, zoom) => (zoom > 10 ? 0.8 : zoom > 5 ? 0.5 : 0.2),
};
<PostOfficeMapProvider markerTilingOptions={MARKER_TILING_OPTIONS}>
<Markers states={markerStates} />
</PostOfficeMapProvider>04 · Animación
Las animaciones simples están incluidas de forma predeterminada. Especifíquelas al crear o simplemente llame a animate() más tarde. El inicio y el final se pueden recibir a través de controladores.
// Set one at creation, or call animate() later
MarkerState(position = point, animation = MarkerAnimation.Bounce)
override fun onMarkerClick(clicked: MarkerState) {
clicked.animate(clicked.extra as? MarkerAnimation)
}if let animation = clicked.extra as? MarkerAnimation {
clicked.animate(animation)
}const marker = createMarkerState({
id: 'animated-marker',
position: HONOLULU,
animation,
onClick: state => state.animate(MarkerAnimation.Bounce),
});Dado que los marcadores durante una animación se dibujan con una superposición dedicada, se mueven incluso cuando el estado ha cambiado al dibujo de mosaicos. La duración se puede cambiar en la configuración del SDK.