تخصيص الخطوط المتعددة للمسار
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
اختيار النظام الأساسي:
Android
iOS
JavaScript
قبل تخصيص خطوط متعددة الأضلاع (أو علامات) للطرق، عليك أولاً تهيئة خيارات تخصيص واجهة المستخدِم.
تهيئة خيارات تخصيص واجهة المستخدم
يتم الإعلان عن معاودة الاتصال المقترَحة المستخدَمة لضبط خيارات تخصيص واجهة المستخدم في البداية
في GMTCMapViewDelegate
. يتم تشغيل mapViewDidInitialize
عندما يكون العنصر GMTCMapView
جاهزًا لعرض الخريطة.
تمت تهيئة منسّق الأنماط، ولكن لا تتوفّر أي عناصر في واجهة المستخدم.
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:)
.
إنّ محتوى هذه الصفحة مرخّص بموجب ترخيص Creative Commons Attribution 4.0 ما لم يُنصّ على خلاف ذلك، ونماذج الرموز مرخّصة بموجب ترخيص Apache 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:)`."]]