Com o SDK do consumidor, você pode aplicar marcadores personalizados e rotear polilinhas para o design do app. Esses elementos de design permitem que os para mostrar uma visualização dinâmica do trajeto do veículo.
Este guia descreve as opções que o SDK oferece na
consumerMapStyleCoordinator
. Esta propriedade está disponível por
a classe GMTCMapView
. Ele abrange apenas os elementos da interface e pressupõe que você tem
um app para o consumidor funcional. Para mais informações sobre como configurar o back-end
serviços de que o SDK do consumidor precisa, consulte a
Como começar a usar o Fleet Engine.
Inicializando opções de personalização da interface
O callback recomendado usado para definir inicialmente as opções de personalização da interface
é declarado no GMTCMapViewDelegate
. O mapViewDidInitialize
o callback será acionado quando o objeto GMTCMapView
estiver pronto para renderizar o mapa.
O coordenador de estilo é inicializado, mas não há elementos de interface do usuário.
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.
}
Marcadores personalizados
O exemplo a seguir usa GMTCMapView
para personalizar os estilos de marcadores.
Para definir o tipo de marcador e suas propriedades, use
setMarkerStyleOptions(_:markerType:)
: Suas opções de marcadores personalizados substituem as
valores padrão fornecidos pelo SDK do consumidor.
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];
}
Tipos de marcador
Os seguintes marcadores estão disponíveis para personalização:
GMTCCustomizableMarkerType.unknown
GMTCCustomizableMarkerType.tripPickupPoint
GMTCCustomizableMarkerType.tripDropoffPoint
GMTCCustomizableMarkerType.tripVehicle
GMTCCustomizableMarkerType.intermediateDestination
Use GMTCCustomizableMarkerType.tripPickupPoint
, GMTCCustomizableMarkerType.intermediateDestination
,
e GMTCCustomizableMarkerType.tripDropoffPoint
para personalizar waypoints durante
Andamento da viagem e do pedido.
Use GMTCCustomizableMarkerType.tripVehicle
para personalizar o ícone do veículo
durante o andamento da viagem e do pedido. O ícone do marcador não muda
de acordo com o tipo de veículo real da viagem.
Opções do marcador
As propriedades personalizáveis disponíveis para cada marcador são um subconjunto dos
propriedades fornecidas pelo Google Maps
MarkerOptions
O SDK do consumidor
GMTCMarkerStyleOptions
são criados usando um inicializador e são imutáveis depois de construídos. Valores padrão
são fornecidos para cada propriedade, portanto, somente valores personalizados precisam ser especificados.
As propriedades a seguir estão disponíveis para personalização:
groundAnchor
isVisible
iconView
icon
zIndex
isFlat
Definir isVisible
como falso é equivalente a "desativar" o marcador.
Deve-se fornecer dados suficientes para que seja possível usar seu próprio elemento de IU no lugar dele.
Exemplo
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];
}
Atualizações dinâmicas de HEC para marcadores de retirada
Para criar um marcador de retirada que mostre de forma dinâmica e periódica o HEC atualizado,
Atualize as opções de estilo do marcador para GMTCCustomizableMarkerType.tripPickupPoint
.
Exemplo
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];
}
Polilinhas personalizadas
A personalização de polilinha é definida usando
GMTCConsumerMapStyleCoordinator#setPolylineStyleOptions(_:polylineType:)
:
O exemplo a seguir mostra como definir opções de estilo de polilinha:
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];
}
Tipos de polilinha
Os seguintes tipos de polilinha estão disponíveis para personalização:
GMTCPolylineType.activeRoute
GMTCPolylineType.remainingRoute
GMTCPolylineType.activeRoute
e GMTCPolylineType.remainingRoute
são exibidos
ao longo do Progresso da Viagem e Pedido. O GMTCPolylineType.activeRoute
é o trajeto que o veículo está percorrendo até o próximo ponto do passageiro, seja ele
de embarque ou desembarque. O GMTCPolylineType.remainingRoute
é o segmento
da viagem que permanece depois que o veículo conclui o GMTCPolylineType.activeRoute
.
Propriedades da polilinha
As propriedades personalizáveis disponíveis para cada polilinha são um subconjunto da
propriedades fornecidas no Google Maps
PolylineOptions
O SDK para o consumidor
GMTCPolylineStyleOptions
são criados usando um inicializador. Eles podem ser imutáveis ou mutáveis, se você quiser.
para fornecer valores personalizados para qualquer propriedade. Valores padrão
são fornecidos para cada propriedade.
As propriedades a seguir estão disponíveis para personalização:
color
width
isVisible
isTrafficEnabled
Definir isVisible
como false
equivale a desativar a polilinha.
Por padrão, isTrafficEnabled
é definido como false
.
Exemplo
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];
}
Polilinhas com reconhecimento de tráfego
A camada de trânsito da polilinha fica desativada por padrão. Quando ele está ativado
com polylineStyleOptions.isTrafficEnabled = true
, segmentos que representam
trechos de tráfego fora do normal são desenhados como o trajeto.
As condições de trânsito são representadas como uma das quatro velocidades: GMTSSpeedType.noData
,
GMTSSpeedType.normal
, GMTSSpeedType.slow
e GMTSSpeedType.trafficJam
.
A cor que representa cada uma dessas classificações de velocidade pode ser personalizada
com setTrafficColorFor(_:color:)
.