Con l'SDK Consumer, puoi applicare indicatori personalizzati e indirizzare polilinee al design della tua app. Questi elementi di design consentono all'app consumer di mostrare un'anteprima dinamica del percorso del veicolo.
Questa guida descrive le opzioni fornite dall'SDK nella
proprietà consumerMapStyleCoordinator
. Questa proprietà è disponibile tramite la classe GMTCMapView
. Copre solo gli elementi dell'interfaccia utente e presuppone che tu abbia un'app consumer funzionante. Per informazioni sulla configurazione dei servizi di backend necessari all'SDK consumer, consulta la Guida introduttiva a 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
. Il callback mapViewDidInitialize
viene attivato quando l'oggetto GMTCMapView
è pronto per il rendering della mappa.
Il coordinatore dello stile è 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
L'esempio seguente utilizza 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 i 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
Utilizza GMTCCustomizableMarkerType.tripPickupPoint
, GMTCCustomizableMarkerType.intermediateDestination
e GMTCCustomizableMarkerType.tripDropoffPoint
per personalizzare i waypoint durante l'avanzamento del viaggio e dell'ordine.
Usa GMTCCustomizableMarkerType.tripVehicle
per personalizzare l'icona del veicolo
durante Viaggio e Avanzamento dell'ordine. L'icona dell'indicatore non cambia
in base al tipo di veicolo effettivo per la corsa.
Opzioni indicatore
Le proprietà personalizzabili disponibili per ogni indicatore sono un sottoinsieme delle
proprietà fornite da Google Maps
MarkerOptions
.
Gli SDK consumer GMTCMarkerStyleOptions
vengono creati utilizzando un inizializzatore e, una volta creati, non possono essere modificati. Per ogni proprietà vengono forniti valori predefiniti, pertanto è necessario specificare solo i valori personalizzati.
Le seguenti proprietà sono disponibili per la personalizzazione:
groundAnchor
isVisible
iconView
icon
zIndex
isFlat
Impostare isVisible
su false equivale a "disattivare" l'indicatore.
È necessario fornire dati sufficienti per consentirti di utilizzare al suo posto il tuo elemento UI.
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 prelievo
Per creare un indicatore di prelievo 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 della polilinea è impostata utilizzando
GMTCConsumerMapStyleCoordinator#setPolylineStyleOptions(_:polylineType:)
.
Nell'esempio seguente viene illustrato 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
Sono disponibili per la personalizzazione i seguenti tipi di polilinee:
GMTCPolylineType.activeRoute
GMTCPolylineType.remainingRoute
GMTCPolylineType.activeRoute
e GMTCPolylineType.remainingRoute
vengono visualizzati
durante Viaggio e Avanzamento dell'ordine. L'GMTCPolylineType.activeRoute
è il percorso che il veicolo sta seguendo al punto successivo del passeggero, che si tratti di prelievo o di discesa. GMTCPolylineType.remainingRoute
è il segmento
del percorso rimanente dopo che il veicolo ha completato la GMTCPolylineType.activeRoute
.
Proprietà della polilinea
Le proprietà personalizzabili disponibili per ogni polilinea sono un sottoinsieme delle
proprietà fornite su Google Maps
PolylineOptions
.
Gli SDK consumer GMTCPolylineStyleOptions
vengono creati utilizzando un inizializzatore. Possono essere immutabili o modificabili se vuoi
fornire valori personalizzati per qualsiasi proprietà. Per ogni proprietà vengono forniti valori predefiniti.
Le seguenti proprietà sono disponibili per la personalizzazione:
color
width
isVisible
isTrafficEnabled
Impostare isVisible
su false
equivale a disattivare la polilinea.
Il valore predefinito di isTrafficEnabled
è 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. Se polylineStyleOptions.isTrafficEnabled = true
è abilitato, come percorso vengono tracciati segmenti che rappresentano tratti di traffico non normale.
Le condizioni del traffico sono rappresentate con una delle seguenti 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:)
.