MapConductorMarker
Erstellen Sie für einen Marker einfach ein Zustandsobjekt und platzieren Sie es in der Kartenansicht. Das Zeichnen übernimmt die Rendering-Engine innerhalb des SDK, die die Zeichnungsart je nach Anzahl automatisch wechselt. Standardmäßig bis zu 2.000 Elemente werden als Standard-Marker der jeweiligen Karten-SDK verwendet, darüber hinaus als Rasterkacheln. Dieser Schwellenwert kann geändert werden, indem der Kartenansicht eine Kachel-Zeichnungsoption übergeben wird.
01 · Marker-Status
MarkerState stellt einen einzelnen Marker dar. Er verfügt über Position, Symbol, Ereignisse und beliebige Begleitdaten. Änderungen an Eigenschaften werden sofort übernommen. Es gibt keine providerspezifischen Typen.
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 · Symbol
Wir bieten alles von der einfachen Angabe von Farbe und Beschriftung auf der Standard-Pin bis hin zu Bild-, Canvas- und Sprechblasen-Symbolen. Jedes Symbol sieht über alle Anbieter hinweg gleich aus.
03 · Interne Rendering-Engine
Das Zeichnen von Markern überlassen wir der internen Rendering-Engine des SDK. Bei geringer Anzahl werden die Standard-Marker der einzelnen Karten-SDK direkt verwendet, sodass die nativen Tap-Erkennungen und Animationen voll genutzt werden können.
Wenn die Anzahl der Marker 2.000 überschreitet, wechselt die Engine die Zeichnungsart. Die Markergruppe wird als Kachelbild gerendert und als Rasterebene überlagert, wodurch die Kosten für das Hinzufügen und Aktualisieren einzelner Elemente im nativen SDK entfallen. Der Code auf der App-Seite ändert sich nicht.
Native Marker
Rasterkacheln
// 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 · Animation
Einfache Animationen sind standardmäßig enthalten. Geben Sie sie bei der Erstellung an oder rufen Sie einfach später animate() auf. Start und Ende können über Handler empfangen werden.
// 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),
});Da Marker während einer Animation mit einer speziellen Overlay-Ebene gezeichnet werden, bewegen sie sich auch, wenn die Kachelzeichnung aktiv ist. Die Dauer kann in den SDK-Einstellungen geändert werden.