Menyesuaikan polyline rute
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Sebelum menyesuaikan polyline (atau penanda) rute, Anda harus menginisialisasi
opsi penyesuaian UI terlebih dahulu.
Lakukan inisialisasi opsi penyesuaian UI
Callback yang direkomendasikan yang digunakan untuk menetapkan opsi penyesuaian UI pada awalnya
dideklarasikan di GMTCMapViewDelegate
. Callback mapViewDidInitialize
dipicu saat objek GMTCMapView
siap merender peta.
Koordinator gaya diinisialisasi, tetapi tidak ada elemen 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.
}
Menyesuaikan polyline
Penyesuaian polyline ditetapkan menggunakan
GMTCConsumerMapStyleCoordinator#setPolylineStyleOptions(_:polylineType:)
.
Contoh berikut menunjukkan cara menyetel opsi gaya polyline:
Jenis polyline
Anda dapat menyesuaikan jenis polyline berikut:
GMTCPolylineType.activeRoute
: Rute yang dilalui kendaraan ke titik berikutnya pengendara, baik itu titik penjemputan atau tujuan.
GMTCPolylineType.remainingRoute
: Segmen perjalanan yang tersisa
setelah kendaraan menyelesaikan GMTCPolylineType.activeRoute
.
Kedua jenis ini ditampilkan di sepanjang perjalanan bersama.
Properti polyline
Properti yang dapat Anda sesuaikan untuk setiap polyline adalah subset dari properti yang disediakan di Google Maps PolylineOptions
.
Properti Consumer SDK
GMTCPolylineStyleOptions
memiliki karakteristik berikut:
- Dibuat menggunakan penginisialisasi.
- Dapat berupa immutable atau mutable jika Anda ingin memberikan nilai kustom untuk
properti apa pun.
- Memiliki nilai default.
Anda dapat menyesuaikan properti berikut:
color
width
isVisible
: Untuk menonaktifkan polyline, tetapkan isVisible
ke false
.
isTrafficEnabled
: Properti ini ditetapkan ke false
secara default.
Contoh
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];
}
Polyline yang mengetahui kondisi lalu lintas
Lapisan traffic polyline dinonaktifkan secara default. Saat Anda mengaktifkannya
dengan menggunakan polylineStyleOptions.isTrafficEnabled = true
, segmen yang merepresentasikan
rentang traffic non-normal akan digambar sebagai rute.
Kondisi lalu lintas ditampilkan sebagai salah satu dari empat kecepatan:
GMTSSpeedType.noData
GMTSSpeedType.normal
GMTSSpeedType.slow
GMTSSpeedType.trafficJam
Anda dapat menyesuaikan warna yang mewakili setiap klasifikasi kecepatan tersebut
dengan menggunakan setTrafficColorFor(_:color:)
.
Kecuali dinyatakan lain, konten di halaman ini dilisensikan berdasarkan Lisensi Creative Commons Attribution 4.0, sedangkan contoh kode dilisensikan berdasarkan Lisensi Apache 2.0. Untuk mengetahui informasi selengkapnya, lihat Kebijakan Situs Google Developers. Java adalah merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-08-31 UTC.
[null,null,["Terakhir diperbarui pada 2025-08-31 UTC."],[[["\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:)`."]]