Con l'SDK consumer, puoi applicare indicatori personalizzati e puoi indirizzare le polilinee al design della tua app. Questi elementi di design consentono per visualizzare un'anteprima dinamica del percorso del veicolo.
Questa guida descrive le opzioni offerte dall'SDK in
consumerMapStyleCoordinator
proprietà. Questa proprietà è disponibile tramite
il corso GMTCMapView
. Copre solo gli elementi dell'interfaccia utente e presuppone che tu abbia
un'app consumer funzionante. Per informazioni sulla configurazione del backend
di cui l'SDK consumer ha bisogno, vedi il
Getting Started with Fleet Engine.
Inizializzazione delle opzioni di personalizzazione dell'interfaccia utente
Il callback consigliato utilizzato per impostare inizialmente le opzioni di personalizzazione dell'interfaccia utente
è dichiarato in GMTCMapViewDelegate
. mapViewDidInitialize
Il callback viene attivato quando l'oggetto GMTCMapView
è pronto per il rendering della mappa.
Il coordinatore di stile è stato inizializzato, ma non sono presenti elementi UI.
Swift
/** ViewController.swift */
class ViewController: UIViewController, GMTCMapViewDelegate {
// MARK: - GMTCMapViewDelegate
func mapViewDidInitialize(_ mapview: GMTCMapView) {
// Set the UI customization options here.
}
}
Objective-C
/** ViewController.m */
@interface ViewController () <GMTCMapViewDelegate>
#pragma mark GMTCMapViewDelegate
- (void)mapViewDidInitialize:(GMTCMapView *)mapview {
// Set the UI customization options here.
}
Indicatori personalizzati
Il seguente esempio utilizza l'GMTCMapView
per personalizzare gli stili degli indicatori.
Per impostare il tipo di indicatore e le sue proprietà, utilizza
setMarkerStyleOptions(_:markerType:)
. Le opzioni degli indicatori personalizzati sostituiscono le
valori predefiniti forniti dall'SDK consumer.
Swift
/** ViewController.swift */
private func changeMarkerStyle(
markerStyleOptions: GMTCMarkerStyleOptions?,
markerType: GMTCCustomizableMarkerType
) {
let styleCoordinator = mapView.consumerMapStyleCoordinator
styleCoordinator.setMarkerStyleOptions(markerStyleOptions, markerType: markerType)
}
/** To restore the default values, call setMarkerStyleOptions(_:markerType:) using nil for the GMTCMarkerStyleOptions parameter.
Here is an example of retrieving the active GMTCMarkerStyleOptions. */
private func retrieveMarkerStyle(markerType: GMTCCustomizableMarkerType) {
let styleCoordinator = mapView.consumerMapStyleCoordinator
// The 'markerStyleOptions' contains the stored style options for this marker type.
let markerStyleOptions = styleCoordinator.markerStyleOptions(for: markerType)
}
Objective-C
/** ViewController.h */
- (void)changeMarkerStyle:(nullable GMTCMarkerStyleOptions *)markerStyleOptions
markerType:(GMTCCustomizableMarkerType)markerType {
GMTCConsumerMapStyleCoordinator *styleCoordinator = _mapView.consumerMapStyleCoordinator;
[styleCoordinator setMarkerStyleOptions:markerStyleOptions markerType:markerType];
}
/** To restore the default values, call setMarkerStyleOptions:markerStyleOptions:markerType: using nil for the GMTCMarkerStyleOptions parameter.
Here is an example of retrieving the active GMTCMarkerStyleOptions. */
- (void)retrieveMarkerStyle:(GMTCCustomizableMarkerType)markerType {
GMTCConsumerMapStyleCoordinator *styleCoordinator = _mapView.consumerMapStyleCoordinator;
// The 'markerStyleOptions' contains the stored style options for this marker type.
GMTCMarkerStyleOptions *markerStyleOptions = [styleCoordinator markerStyleOptionsForType:markerType];
}
Tipi di indicatori
I seguenti indicatori sono disponibili per la personalizzazione:
GMTCCustomizableMarkerType.unknown
GMTCCustomizableMarkerType.tripPickupPoint
GMTCCustomizableMarkerType.tripDropoffPoint
GMTCCustomizableMarkerType.tripVehicle
GMTCCustomizableMarkerType.intermediateDestination
Usa GMTCCustomizableMarkerType.tripPickupPoint
, GMTCCustomizableMarkerType.intermediateDestination
,
e GMTCCustomizableMarkerType.tripDropoffPoint
per personalizzare le tappe durante
Avanzamento del viaggio e degli ordini.
Usa GMTCCustomizableMarkerType.tripVehicle
per personalizzare l'icona del veicolo
durante l'avanzamento del viaggio e degli ordini. L'icona dell'indicatore rimane invariata
in base al tipo di veicolo
effettivo per la corsa.
Opzioni dell'indicatore
Le proprietà personalizzabili disponibili per ciascun indicatore sono un sottoinsieme del
strutture fornite da Google Maps
MarkerOptions
SDK consumer
GMTCMarkerStyleOptions
sono create mediante un inizializzatore e sono immutabili una volta create. Valori predefiniti
sono forniti per ogni proprietà, quindi è necessario specificare solo i valori personalizzati.
Le seguenti proprietà sono disponibili per la personalizzazione:
groundAnchor
isVisible
iconView
icon
zIndex
isFlat
Impostare isVisible
su false è l'equivalente di "spegnere" l'indicatore.
Devi fornire una quantità di dati sufficiente per consentirti di utilizzare il tuo elemento UI al suo posto.
Esempio
Swift
/** MapViewController.swift */
private func updateMarkerUIOptions() {
// Get the GMTCConsumerMapStyleCoordinator
let consumerMapStyleCoordinator = mapView.consumerMapStyleCoordinator
// The marker type that you would like to set custom UI options for.
let customizableMarkerType = GMTCCustomizableMarkerType.tripVehicle
// Initializing marker options.
let markerStyleOptions = GMTCMutableMarkerStyleOptions()
markerStyleOptions.groundAnchor = kGMSMarkerDefaultGroundAnchor
markerStyleOptions.icon = icon
markerStyleOptions.zIndex = 100
markerStyleOptions.isFlat = false
markerStyleOptions.isVisible = true
consumerMapStyleCoordinator.setMarkerStyleOptions(markerStyleOptions, markerType: customizableMarkerType)
// Reset marker options to default values.
consumerMapStyleCoordinator.setMarkerStyleOptions(nil, markerType: customizableMarkerType)
}
Objective-C
/** MapViewController.m */
- (void)updateMarkerUIOptions {
// Get the GMTCConsumerMapStyleCoordinator
GMTCConsumerMapStyleCoordinator *consumerMapStyleCoordinator = [_mapView consumerMapStyleCoordinator];
// The marker type that you would like to set custom UI options for.
GMTCCustomizableMarkerType customizableMarkerType = GMTCCustomizableMarkerTypeTripVehicle;
// Initializing marker options.
GMTCMutableMarkerStyleOptions *markerStyleOptions =
[[GMTCMutableMarkerStyleOptions alloc] init];
markerStyleOptions.groundAnchor = kGMSMarkerDefaultGroundAnchor;
markerStyleOptions.icon = icon;
markerStyleOptions.zIndex = 100;
markerStyleOptions.isFlat = NO;
markerStyleOptions.isVisible = YES;
[consumerMapStyleCoordinator setMarkerStyleOptions:markerStyleOptions markerType:customizableMarkerType];
// Reset marker options to default values.
[consumerMapStyleCoordinator setMarkerStyleOptions:nil markerType:customizableMarkerType];
}
Aggiornamenti dinamici dell'orario di arrivo stimato per gli indicatori di ritiro
Per creare un indicatore di ritiro che mostri in modo dinamico l'orario di arrivo stimato aggiornato periodicamente:
aggiorna le opzioni di stile dell'indicatore per GMTCCustomizableMarkerType.tripPickupPoint
.
Esempio
Swift
/** MapViewController.swift */
/// Updates the ETA every minute by creating a Timer that repeats every minute.
private func schedulePickupMarkerStyleUpdates() {
Timer.scheduledTimer(
timeInterval: 60.0, // Update marker ETA every minute.
target: self,
selector: #selector(updatePickupMarkerETA),
userInfo: nil,
repeats: true)
}
/// Updates the marker options for GMTCCustomizableMarkerType.tripPickupPoint for the current time.
@objc private func updatePickupMarkerETA() {
let consumerMapStyleCoordinator = mapView.consumerMapStyleCoordinator
let previousOptions = consumerMapStyleCoordinator.markerStyleOptions(for: .tripPickupPoint)
// Get updated ETA icon.
let updatedETAIcon = pickupIconForCurrentTime()
let markerStyleOptions = GMTCMutableMarkerStyleOptions()
markerStyleOptions.groundAnchor = kGMSMarkerDefaultGroundAnchor
markerStyleOptions.icon = updatedETAIcon
markerStyleOptions.zIndex = 100
markerStyleOptions.isFlat = false
markerStyleOptions.isVisible = true
consumerMapStyleCoordinator.setMarkerStyleOptions(markerStyleOptions, markerType: .tripPickupPoint)
}
Objective-C
/** MapViewController.m */
/** Updates the ETA every minute by creating an NSTimer that repeats every minute. */
- (void)schedulePickupMarkerStyleUpdates {
[NSTimer scheduledTimerWithTimeInterval:60.0 // Update marker ETA every minute.
target:self
selector:@selector(updatePickupMarkerETA)
userInfo:nil
repeats:YES];
}
/** Updates the marker options for GMTCCustomizableMarkerTypeTripPickupPoint for the current time. */
- (void)updatePickupMarkerETA {
GMTCConsumerMapStyleCoordinator *consumerMapStyleCoordinator = [_mapView consumerMapStyleCoordinator];
GMTCMarkerStyleOptions *previousOptions = [consumerMapStyleCoordinator markerStyleOptionsForType:GMTCCustomizableMarkerTypeTripPickupPoint];
// Get updated ETA icon.
UIImage *updatedETAIcon = [self pickupIconForCurrentTime];
GMTCMutableMarkerStyleOptions *markerStyleOptions =
[[GMTCMutableMarkerStyleOptions alloc] init];
markerStyleOptions.groundAnchor = kGMSMarkerDefaultGroundAnchor;
markerStyleOptions.icon = updatedETAIcon;
markerStyleOptions.zIndex = 100;
markerStyleOptions.isFlat = NO;
markerStyleOptions.isVisible = YES;
[consumerMapStyleCoordinator setMarkerStyleOptions:markerStyleOptions markerType:GMTCCustomizableMarkerTypeTripPickupPoint];
}
Polilinee personalizzate
La personalizzazione delle poliline viene impostata utilizzando
GMTCConsumerMapStyleCoordinator#setPolylineStyleOptions(_:polylineType:)
.
L'esempio seguente mostra come impostare le opzioni di stile della polilinea:
Swift
/** ViewController.swift */
private func changePolylineStyleOptions(
polylineStyleOptions: GMTCPolylineStyleOptions?,
polylineType: GMTCPolylineType
) {
let styleCoordinator = mapView.consumerMapStyleCoordinator
styleCoordinator.setPolylineStyleOptions(polylineStyleOptions, polylineType: polylineType)
}
/* Setting custom polyline options will override the default values provided by the Consumer SDK.
The default values can be restored by calling setPolylineStyleOptions(_:polylineType:) with nil for the GMTCPolylineStyleOptions.
The active GMTCPolylineStyleOptions can be retrieved via */
private func retrievePolylineStyleOptions(for polylineType: GMTCPolylineType) {
let styleCoordinator = mapView.consumerMapStyleCoordinator
// The 'polylineStyleOptions' contains the stored style options for this polyline type.
let polylineStyleOptions = styleCoordinator.polylineStyleOptions(for: polylineType)
}
Objective-C
/** ViewController.h */
- (void)changePolylineStyleOptions:(nullable GMTCPolylineStyleOptions *)polylineStyleOptions
polylineType:(GMTCPolylineType)polylineType {
GMTCConsumerMapStyleCoordinator *styleCoordinator = _mapView.consumerMapStyleCoordinator;
[styleCoordinator setPolylineStyleOptions:polylineStyleOptions polylineType:polylineType];
}
/* Setting custom polyline options will override the default values provided by the Consumer SDK.
The default values can be restored by calling setPolylineStyleOptions:polylineType: with nil for the GMTCPolylineStyleOptions.
The active GMTCPolylineStyleOptions can be retrieved via */
- (void)retrievePolylineStyleOptionsForType:(GMTCPolylineType)polylineType {
GMTCConsumerMapStyleCoordinator *styleCoordinator = _mapView.consumerMapStyleCoordinator;
// The 'polylineStyleOptions' contains the stored style options for this polyline type.
GMTCPolylineStyleOptions *polylineStyleOptions = [styleCoordinator polylineStyleOptionsForType:polylineType];
}
Tipi di polilinea
I seguenti tipi di polilinea sono disponibili per la personalizzazione:
GMTCPolylineType.activeRoute
GMTCPolylineType.remainingRoute
GMTCPolylineType.activeRoute
e GMTCPolylineType.remainingRoute
sono visualizzati
durante l'avanzamento del viaggio e dell'ordine. GMTCPolylineType.activeRoute
è il percorso seguito dal veicolo per raggiungere il punto successivo del passeggero, che si tratti di
il ritiro o la consegna. GMTCPolylineType.remainingRoute
è il segmento
del percorso rimanente dopo che il veicolo ha completato GMTCPolylineType.activeRoute
.
Proprietà polilinea
Le proprietà personalizzabili disponibili per ogni polilinea sono un sottoinsieme della
strutture fornite su Google Maps
PolylineOptions
Le versioni dell'SDK consumer
GMTCPolylineStyleOptions
vengono create mediante un inizializzatore. Possono essere immutabili o modificabili se vuoi
per fornire valori personalizzati per qualsiasi proprietà. Valori predefiniti
sono forniti per ogni proprietà.
Le seguenti proprietà sono disponibili per la personalizzazione:
color
width
isVisible
isTrafficEnabled
Impostare isVisible
su false
equivale a disattivare la polilinea.
Per impostazione predefinita, l'opzione isTrafficEnabled
è impostata su false
.
Esempio
Swift
/** MapViewController.swift */
private func updatePolylineUIOptions() {
// Get the GMTCConsumerMapStyleCoordinator
let consumerMapStyleCoordinator = mapView.consumerMapStyleCoordinator
// The polyline type that you would like to set custom UI options for.
let customizablePolylineType = GMTCPolylineType.activeRoute
// Initializing polyline options with default values (immutable version).
let polylineStyleOptions = GMTCPolylineStyleOptions()
consumerMapStyleCoordinator.setPolylineStyleOptions(
polylineStyleOptions, polylineType: customizablePolylineType)
// Initializing polyline options with custom values (mutable version).
let mutablePolylineStyleOptions = GMTCMutablePolylineStyleOptions()
mutablePolylineStyleOptions.isVisible = true
mutablePolylineStyleOptions.isTrafficEnabled = true
mutablePolylineStyleOptions.setTrafficColorFor(.slow, color: .yellow)
mutablePolylineStyleOptions.setTrafficColorFor(.trafficJam, color: .purple)
consumerMapStyleCoordinator.setPolylineStyleOptions(
mutablePolylineStyleOptions, polylineType: customizablePolylineType)
// Reset polyline options to default values.
consumerMapStyleCoordinator.setPolylineStyleOptions(
nil, polylineType: customizablePolylineType)
}
Objective-C
/** MapViewController.m */
- (void)updatePolylineUIOptions {
// Get the GMTCConsumerMapStyleCoordinator
GMTCConsumerMapStyleCoordinator *consumerMapStyleCoordinator = [_mapView consumerMapStyleCoordinator];
// The polyline type that you would like to set custom UI options for.
GMTCPolylineType customizablePolylineType = GMTCPolylineTypeActiveRoute;
// Initializing polyline options with default values (immutable version).
GMTCPolylineStyleOptions *polylineStyleOptions = [[GMTCPolylineStyleOptions alloc] init];
[consumerMapStyleCoordinator setPolylineStyleOptions:polylineStyleOptions
polylineType:customizablePolylineType];
// Initializing polyline options with custom values (mutable version).
GMTCMutablePolylineStyleOptions *mutablePolylineStyleOptions = [[GMTCMutablePolylineStyleOptions alloc] init];
mutablePolylineStyleOptions.isVisible = YES;
mutablePolylineStyleOptions.isTrafficEnabled = YES;
[mutablePolylineStyleOptions setTrafficColorForSpeed:GMTSSpeedTypeSlow color:[UIColor yellowColor]];
[mutablePolylineStyleOptions setTrafficColorForSpeed:GMTSSpeedTypeTrafficJam color:[UIColor purpleColor]];
[consumerMapStyleCoordinator setPolylineStyleOptions:mutablePolylineStyleOptions
polylineType:customizablePolylineType];
// Reset polyline options to default values.
[consumerMapStyleCoordinator setPolylineStyleOptions:nil
polylineType:customizablePolylineType];
}
Polilinee sensibili al traffico
Il livello di traffico della polilinea è disattivato per impostazione predefinita. Quando è abilitato
con polylineStyleOptions.isTrafficEnabled = true
, i segmenti rappresentano
come tratti di traffico non normale.
Le condizioni del traffico sono rappresentate da una di quattro velocità: GMTSSpeedType.noData
,
GMTSSpeedType.normal
, GMTSSpeedType.slow
e GMTSSpeedType.trafficJam
.
Il colore che rappresenta ciascuna di queste classificazioni di velocità può essere personalizzato.
con setTrafficColorFor(_:color:)
.