自訂路線折線
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
自訂路徑折線 (或標記) 前,請先初始化 UI 自訂選項。
初始化 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.
}
自訂折線
折線自訂功能是使用 GMTCConsumerMapStyleCoordinator#setPolylineStyleOptions(_:polylineType:)
設定。
以下範例說明如何設定折線樣式選項:
折線類型
您可以自訂下列折線類型:
GMTCPolylineType.activeRoute
:車輛前往乘客下一個地點 (上車或下車地點) 的路線。
GMTCPolylineType.remainingRoute
:車輛完成 GMTCPolylineType.activeRoute
後,行程的剩餘路段。
這兩種訊息都會在共用旅程中顯示。
折線屬性
您可以為每條折線自訂的屬性,是 Google 地圖 PolylineOptions
提供的屬性子集。Consumer SDK
GMTCPolylineStyleOptions
屬性具有下列特徵:
- 使用初始化器建構。
- 如要為任何屬性提供自訂值,可以設為不可變動或可變動。
- 有預設值。
您可以自訂下列屬性:
color
width
isVisible
:如要停用折線,請將 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.strokeWidth = 8.0
mutablepolylineStyleOptions.strokeColor = .blue
mutablepolylineStyleOptions.zIndex = 1000
mutablepolylineStyleOptions.isGeodesic = 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.strokeWidth = 8.0;
mutablepolylineStyleOptions.strokeColor = [UIColor blueColor];
mutablepolylineStyleOptions.zIndex = 1000;
mutablepolylineStyleOptions.isGeodesic = 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:)
自訂代表各速度分類的顏色。
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2025-08-31 (世界標準時間)。
[null,null,["上次更新時間:2025-08-31 (世界標準時間)。"],[[["\u003cp\u003eCustomize the appearance of active and remaining route polylines, including color, width, and visibility, using \u003ccode\u003eGMTCPolylineStyleOptions\u003c/code\u003e.\u003c/p\u003e\n"],["\u003cp\u003eInitialize UI customization options within the \u003ccode\u003emapViewDidInitialize\u003c/code\u003e callback of the \u003ccode\u003eGMTCMapViewDelegate\u003c/code\u003e.\u003c/p\u003e\n"],["\u003cp\u003eEnable traffic-aware polylines and customize their color representation for different traffic speeds.\u003c/p\u003e\n"],["\u003cp\u003eAccess and modify polyline properties through the \u003ccode\u003eGMTCConsumerMapStyleCoordinator\u003c/code\u003e using the \u003ccode\u003esetPolylineStyleOptions\u003c/code\u003e method.\u003c/p\u003e\n"]]],["Initially, UI customization options are set within the `mapViewDidInitialize` callback. Polyline customization is managed via `GMTCConsumerMapStyleCoordinator#setPolylineStyleOptions(_:polylineType:)`, allowing customization of `activeRoute` and `remainingRoute`. Properties like `color`, `width`, `isVisible`, and `isTrafficEnabled` can be modified. Traffic-aware polylines, disabled by default, can be enabled and traffic conditions such as `noData`, `normal`, `slow`, and `trafficJam` can have custom colors. These options can be set to default or with custom values.\n"],null,["Select platform: [Android](/maps/documentation/mobility/journey-sharing/on-demand/android/customize-polylines \"View this page for the Android platform docs.\") [iOS](/maps/documentation/mobility/journey-sharing/on-demand/ios/customize-polylines \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/mobility/journey-sharing/on-demand/javascript/customize-route-polylines \"View this page for the JavaScript platform docs.\")\n\n\u003cbr /\u003e\n\nBefore you customize route polylines (or markers), you first need to initialize\nthe UI customization options.\n\nInitialize UI customization options\n\nThe recommended callback used to initially set the UI customization options\nis declared in the `GMTCMapViewDelegate`. The `mapViewDidInitialize`\ncallback is triggered when the `GMTCMapView` object is ready to render the map.\nThe style coordinator is initialized, but no UI elements are present. \n\nSwift \n\n /** ViewController.swift */\n\n class ViewController: UIViewController, GMTCMapViewDelegate {\n\n // MARK: - GMTCMapViewDelegate\n\n func mapViewDidInitialize(_ mapview: GMTCMapView) {\n // Set the UI customization options here.\n }\n }\n\nObjective-C \n\n /** ViewController.m */\n\n @interface ViewController () \u003cGMTCMapViewDelegate\u003e\n\n #pragma mark GMTCMapViewDelegate\n\n - (void)mapViewDidInitialize:(GMTCMapView *)mapview {\n // Set the UI customization options here.\n }\n\nCustomize polylines\n\nPolyline customization is set using\n`GMTCConsumerMapStyleCoordinator#setPolylineStyleOptions(_:polylineType:)`.\n\nThe following example shows how to set polyline style options:\n\nPolyline types\n\nYou can customize the following polyline types:\n\n- `GMTCPolylineType.activeRoute`: The route the vehicle is taking to the rider's next point, whether it is the pickup or the drop-off.\n- `GMTCPolylineType.remainingRoute`: The segment of the trip that remains after the vehicle completes the `GMTCPolylineType.activeRoute`.\n\nBoth of these types are displayed throughout a shared journey.\n\nPolyline properties\n\nThe properties you can customize for each polyline are a subset of the\nproperties provided on Google Maps\n[`PolylineOptions`](https://developers.google.com/android/reference/com/google/android/gms/maps/model/PolylineOptions).\nThe Consumer SDK\n[`GMTCPolylineStyleOptions`](/maps/documentation/mobility/journey-sharing/on-demand/reference/ios/interface_g_m_t_c_polyline_style_options)\nproperties have the following traits:\n\n- Built using an initializer.\n- Can be immutable or mutable if you want to provide custom values for any property.\n- Have default values.\n\nYou can customize the following properties:\n\n- `color`\n- `width`\n- `isVisible`: To disable a polyline, set `isVisible` to `false`.\n- `isTrafficEnabled`: This property is set to `false` by default.\n\nExample \n\nSwift \n\n /** MapViewController.swift */\n\n private func updatePolylineUIOptions() {\n // Get the GMTCConsumerMapStyleCoordinator\n let consumerMapStyleCoordinator = mapView.consumerMapStyleCoordinator\n\n // The polyline type that you would like to set custom UI options for.\n let customizablePolylineType = GMTCPolylineType.activeRoute\n\n // Initializing polyline options with default values (immutable version).\n let polylineStyleOptions = GMTCPolylineStyleOptions()\n consumerMapStyleCoordinator.setPolylineStyleOptions(\n polylineStyleOptions, polylineType: customizablePolylineType)\n\n // Initializing polyline options with custom values (mutable version).\n let mutablePolylineStyleOptions = GMTCMutablePolylineStyleOptions()\n mutablePolylineStyleOptions.isVisible = true\n mutablepolylineStyleOptions.strokeWidth = 8.0\n mutablepolylineStyleOptions.strokeColor = .blue\n mutablepolylineStyleOptions.zIndex = 1000\n mutablepolylineStyleOptions.isGeodesic = true\n mutablePolylineStyleOptions.isTrafficEnabled = true\n mutablePolylineStyleOptions.setTrafficColorFor(.slow, color: .yellow)\n mutablePolylineStyleOptions.setTrafficColorFor(.trafficJam, color: .purple)\n consumerMapStyleCoordinator.setPolylineStyleOptions(\n mutablePolylineStyleOptions, polylineType: customizablePolylineType)\n\n // Reset polyline options to default values.\n consumerMapStyleCoordinator.setPolylineStyleOptions(\n nil, polylineType: customizablePolylineType)\n }\n\nObjective-C \n\n /** MapViewController.m */\n\n - (void)updatePolylineUIOptions {\n // Get the GMTCConsumerMapStyleCoordinator\n GMTCConsumerMapStyleCoordinator *consumerMapStyleCoordinator = [_mapView consumerMapStyleCoordinator];\n\n // The polyline type that you would like to set custom UI options for.\n GMTCPolylineType customizablePolylineType = GMTCPolylineTypeActiveRoute;\n\n // Initializing polyline options with default values (immutable version).\n GMTCPolylineStyleOptions *polylineStyleOptions = [[GMTCPolylineStyleOptions alloc] init];\n [consumerMapStyleCoordinator setPolylineStyleOptions:polylineStyleOptions\n polylineType:customizablePolylineType];\n\n // Initializing polyline options with custom values (mutable version).\n GMTCMutablePolylineStyleOptions *mutablePolylineStyleOptions = [[GMTCMutablePolylineStyleOptions alloc] init];\n mutablePolylineStyleOptions.isVisible = YES;\n mutablepolylineStyleOptions.strokeWidth = 8.0;\n mutablepolylineStyleOptions.strokeColor = [UIColor blueColor];\n mutablepolylineStyleOptions.zIndex = 1000;\n mutablepolylineStyleOptions.isGeodesic = YES;\n mutablePolylineStyleOptions.isTrafficEnabled = YES;\n [mutablePolylineStyleOptions setTrafficColorForSpeed:GMTSSpeedTypeSlow color:[UIColor yellowColor]];\n [mutablePolylineStyleOptions setTrafficColorForSpeed:GMTSSpeedTypeTrafficJam color:[UIColor purpleColor]];\n [consumerMapStyleCoordinator setPolylineStyleOptions:mutablePolylineStyleOptions\n polylineType:customizablePolylineType];\n\n // Reset polyline options to default values.\n [consumerMapStyleCoordinator setPolylineStyleOptions:nil\n polylineType:customizablePolylineType];\n }\n\nTraffic-aware polylines\n\nThe traffic layer of the polyline is disabled by default. When you enable it\nby using `polylineStyleOptions.isTrafficEnabled = true`, segments representing\nstretches of non-normal traffic are drawn as the route.\n\nTraffic conditions are represented as one of four speeds:\n\n- `GMTSSpeedType.noData`\n- `GMTSSpeedType.normal`\n- `GMTSSpeedType.slow`\n- `GMTSSpeedType.trafficJam`\n\nYou can customize the color representing each of those speed classifications\nby using `setTrafficColorFor(_:color:)`."]]