您可以使用 Consumer SDK,將自訂標記和路線套用至應用程式設計。這些設計元素可讓消費者應用程式顯示車輛路線的動態預覽畫面。
本指南將說明 SDK 在 consumerMapStyleCoordinator
屬性中提供的選項。這個屬性可透過 GMTCMapView
類別取得。本文僅涵蓋 UI 元素,並假設您具備可正常運作的消費者應用程式。如要進一步瞭解如何設定 Consumer SDK 所需的後端服務,請參閱開始使用 Fleet Engine 一文。
初始化 UI 自訂選項
用於初始設定 UI 自訂選項的建議回呼會在 GMTCMapViewDelegate
中宣告。當 GMTCMapView
物件準備好轉譯地圖時,就會觸發 mapViewDidInitialize
回呼。樣式協調器已初始化,但沒有任何 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.
}
自訂標記
下例使用 GMTCMapView
自訂標記樣式。如要設定標記類型及其屬性,請使用 setMarkerStyleOptions(_:markerType:)
。您的自訂標記選項會覆寫 Consumer SDK 提供的預設值。
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];
}
標記類型
以下是可供自訂的標記:
GMTCCustomizableMarkerType.unknown
GMTCCustomizableMarkerType.tripPickupPoint
GMTCCustomizableMarkerType.tripDropoffPoint
GMTCCustomizableMarkerType.tripVehicle
GMTCCustomizableMarkerType.intermediateDestination
在行程和訂單進度期間,使用 GMTCCustomizableMarkerType.tripPickupPoint
、GMTCCustomizableMarkerType.intermediateDestination
和 GMTCCustomizableMarkerType.tripDropoffPoint
自訂路線控點。
使用 GMTCCustomizableMarkerType.tripVehicle
自訂行程和訂單進度中的車輛圖示。標記圖示不會根據行程的實際交通工具類型變更。
標記選項
每個標記可用的可自訂屬性是 Google 地圖 MarkerOptions
所提供屬性的子集。Consumer SDK GMTCMarkerStyleOptions
是使用初始化器建構,建構後就無法變更。系統會為每個屬性提供預設值,因此您只需指定自訂值。
下列屬性可供自訂:
groundAnchor
isVisible
iconView
icon
zIndex
isFlat
將 isVisible
設為 false,相當於「停用」標記。建議您提供足夠的資料,以便使用自己的 UI 元素。
範例
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];
}
為取貨標記動態更新預計到達時間
如要建立取貨標記,定期動態顯示最新的預計到達時間,請更新 GMTCCustomizableMarkerType.tripPickupPoint
的標記樣式選項。
範例
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];
}
自訂折線
折線自訂功能是使用 GMTCConsumerMapStyleCoordinator#setPolylineStyleOptions(_:polylineType:)
進行設定。
以下範例說明如何設定折線樣式選項:
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];
}
折線類型
以下折線類型可供自訂:
GMTCPolylineType.activeRoute
GMTCPolylineType.remainingRoute
整個行程和訂單進度都會顯示 GMTCPolylineType.activeRoute
和 GMTCPolylineType.remainingRoute
。GMTCPolylineType.activeRoute
是車輛前往乘客下一個地點的路線,無論車輛是上車還是下車地點。GMTCPolylineType.remainingRoute
是車輛完成 GMTCPolylineType.activeRoute
後剩餘的行程路段。
折線屬性
每個折線可用的可自訂屬性都是 Google 地圖 PolylineOptions
所提供屬性的子集。
Consumer SDK 的 GMTCPolylineStyleOptions
是使用初始化工具建構而成。如果您要為任何屬性提供自訂值,這些屬性可以是不可變動或變動。系統會為每個屬性提供預設值。
下列屬性可供自訂:
color
width
isVisible
isTrafficEnabled
將 isVisible
設為 false
等同於停用折線。根據預設,isTrafficEnabled
會設為 false
。
範例
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];
}
車流量感知折線
折線的車流量圖層預設為停用。透過 polylineStyleOptions.isTrafficEnabled = true
啟用時,代表非一般流量的延伸線段會繪製成路線。
交通狀況是以下列四種速度之一表示:GMTSSpeedType.noData
、GMTSSpeedType.normal
、GMTSSpeedType.slow
和 GMTSSpeedType.trafficJam
。各個速度分類的顏色可透過 setTrafficColorFor(_:color:)
自訂。