تخصيص الخطوط المتعددة للمسار
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
يتناول هذا المستند كيفية تخصيص خطوط متعددة الأضلاع للطريق في الخريطة التي تستخدمها في تطبيق تتبُّع الرحلات المستند إلى الويب والمخصّص للمستهلكين ومشغّلي أساطيل المركبات.
باستخدام حزمة تطوير البرامج (SDK) الخاصة بالمستهلكين، يمكنك التحكّم في إمكانية ظهور خطوط متعددة الأضلاع للمسار أو تحديد نمطها لمسار رحلة على الخريطة. ينشئ حزمة تطوير البرامج (SDK) عنصر google.maps.Polyline لكل زوج من الإحداثيات في المسار النشط أو المتبقي للرحلة. بعد ذلك، تطبّق المكتبة عمليات التخصيص هذه في حالتين:
- قبل إضافة العناصر إلى الخريطة
- عندما تتغير البيانات المستخدَمة للعناصر
تنسيق الخطوط المتعددة للمسار
على غرار طريقة تصميم العلامات، يمكنك تصميم خطوط مسارات متعدّدة الأضلاع باستخدام
مَعلمات التخصيص. يمكنك بعد ذلك ضبط الأسلوب باستخدام إحدى الطرق التالية:
- الأبسط: استخدِم
PolylineOptions لتطبيقها على جميع عناصر Polyline المطابقة عند إنشائها أو تعديلها.
- متقدّمة: حدِّد دالة تخصيص.
تسمح وظائف التخصيص بتصميم العناصر بشكل فردي استنادًا إلى البيانات التي ترسلها Fleet Engine. يمكن أن تغيّر الدالة نمط كل عنصر استنادًا إلى الحالة الحالية للرحلة، مثلاً، تلوين العنصر
Polyline بدرجة أغمق أو جعله أكثر سمكًا عندما تكون المركبة تتحرك بسرعة أبطأ. يمكنك حتى الانضمام إلى مصادر من خارج Fleet Engine
وتصميم الكائن Polyline استنادًا إلى هذه المعلومات.
مَعلمات التخصيص
عند تصميم خطوط متعددة الأضلاع خاصة بالطرق، يمكنك استخدام المَعلمات المتوفّرة في
FleetEngineShipmentLocationProviderOptions. توفّر هذه المَعلمات حالات مختلفة للمسار خلال رحلة المركبة، وذلك على النحو التالي:
استخدام PolylineOptions
يوضّح المثال التالي كيفية ضبط نمط Polyline باستخدام PolylineOptions. اتّبِع هذا النمط لتخصيص نمط أي كائن Polyline باستخدام أي من خيارات التخصيص الخاصة بالخطوط المتعددة المضلّعة المذكورة سابقًا.
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
استخدام دوال التخصيص لتصميم خطوط مسارات متعددة الأضلاع
يوضّح المثال التالي كيفية ضبط نمط خط متعدد الأضلاع لمسار نشط. اتّبِع هذا النمط لتخصيص نمط أي عنصر Polyline باستخدام أي من مَعلمات تخصيص خطوط مسار متعدّدة الأضلاع المذكورة سابقًا.
JavaScript
// Color the route polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
TypeScript
// Color the route Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params: ShipmentPolylineCustomizationFunctionParams) => {
const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
التحكّم في مستوى ظهور الخطوط المتعددة للطريق
تكون جميع عناصر Polyline مرئية تلقائيًا. لإخفاء عنصر Polyline، اضبط السمة visible على النحو التالي:
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
إنّ محتوى هذه الصفحة مرخّص بموجب ترخيص Creative Commons Attribution 4.0 ما لم يُنصّ على خلاف ذلك، ونماذج الرموز مرخّصة بموجب ترخيص Apache 2.0. للاطّلاع على التفاصيل، يُرجى مراجعة سياسات موقع Google Developers. إنّ Java هي علامة تجارية مسجَّلة لشركة Oracle و/أو شركائها التابعين.
تاريخ التعديل الأخير: 2025-08-31 (حسب التوقيت العالمي المتفَّق عليه)
[null,null,["تاريخ التعديل الأخير: 2025-08-31 (حسب التوقيت العالمي المتفَّق عليه)"],[[["\u003cp\u003eThis guide explains how to customize the appearance and visibility of route polylines within your web-based journey tracking applications using the Consumer SDK.\u003c/p\u003e\n"],["\u003cp\u003eYou can style route polylines by either using \u003ccode\u003ePolylineOptions\u003c/code\u003e for simple styling across all polylines or by employing customization functions for advanced, data-driven styling of individual polyline segments.\u003c/p\u003e\n"],["\u003cp\u003eCustomization parameters allow you to control the styling of already traveled, actively traveled, and not-yet traveled paths independently.\u003c/p\u003e\n"],["\u003cp\u003eThe provided code examples demonstrate how to apply these customization techniques using both \u003ccode\u003ePolylineOptions\u003c/code\u003e and customization functions in JavaScript and TypeScript.\u003c/p\u003e\n"],["\u003cp\u003eRoute polyline visibility can be easily toggled by setting the \u003ccode\u003evisible\u003c/code\u003e property to \u003ccode\u003efalse\u003c/code\u003e within the desired customization parameters.\u003c/p\u003e\n"]]],["This document details customizing route polylines in a web-based journey tracking app using the Consumer SDK. Styling is achieved via `PolylineOptions` for simple application to all `Polyline` objects or through customization functions for dynamic styling based on journey data. Customization parameters include styling for already traveled, actively traveled, and not-yet-traveled paths. Visibility can be controlled by setting the `visible` property. Customization functions allow altering `Polyline` objects' styles based on real-time journey data, such as changing colors based on distance.\n"],null,["\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nThis document covers how to customize route polylines for the map you use in\nyour web-based journey tracking app for consumer users and fleet operators.\n\nWith the Consumer SDK, you can control route polyline visibility or style the\nroute polyline for a journey's route on the map. The SDK creates a\n[`google.maps.Polyline`](/maps/documentation/javascript/reference/polygon#Polyline) object for each pair of coordinates in the journey's\nactive or remaining path. The library then applies these customizations in\ntwo situations:\n\n- before adding the objects to the map\n- when the data used for the objects have changed\n\nStyle route polylines\n\nSimilar to how you can style markers, you style route polylines using\n**customization parameters**. From there, you configure styling using one of the\nfollowing approaches:\n\n- **Simplest** : Use `PolylineOptions` to apply to all of the matched `Polyline` objects when they are created or updated.\n- **Advanced** : Specify a **customization function** . Customization functions allow for individual styling of the objects based on data sent by Fleet Engine. The function can change the styling of each object based on the current state of the journey; for example, coloring the `Polyline` object a deeper shade, or making it thicker when the vehicle is moving slower. You can even join against from sources outside Fleet Engine and style the `Polyline` object based on that information.\n\nCustomization parameters\n\nWhen styling route polylines, you use parameters provided in\n[`FleetEngineShipmentLocationProviderOptions`](/maps/documentation/javascript/reference/journey-sharing-shipment-tracking#FleetEngineShipmentLocationProviderOptions). These parameters provide for\ndifferent path states in the vehicle's journey, as follows:\n\n- **Already traveled** paths: Use [`takenPolylineCustomization`](/maps/documentation/javascript/reference/journey-sharing-shipment-tracking#FleetEngineShipmentLocationProviderOptions.takenPolylineCustomization).\n- **Actively traveled** path: Use [`activePolylineCustomization`](/maps/documentation/javascript/reference/journey-sharing-shipment-tracking#FleetEngineShipmentLocationProviderOptions.activePolylineCustomization).\n- **Not-yet traveled** path: Use [`remainingPolylineCustomization`](/maps/documentation/javascript/reference/journey-sharing-shipment-tracking#FleetEngineShipmentLocationProviderOptions.remainingPolylineCustomization).\n\nUse `PolylineOptions`\n\nThe following example shows how to configure the styling for a `Polyline` object\nwith [`PolylineOptions`](/maps/documentation/javascript/reference/polygon#PolylineOptions). Follow this pattern to customize the styling of\nany `Polyline` object using any of the polyline customizations listed earlier.\n\n\u003cbr /\u003e\n\nJavaScript\n\n\u003cbr /\u003e\n\n activePolylineCustomization = {\n strokeWidth: 5,\n strokeColor: 'black',\n };\n\n\u003cbr /\u003e\n\nTypeScript\n\n\u003cbr /\u003e\n\n activePolylineCustomization = {\n strokeWidth: 5,\n strokeColor: 'black',\n };\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nUse customization functions to style route polylines\n\nThe following example shows how to configure styling for an active route\npolyline. Follow this pattern to customize the styling of any `Polyline` object\nusing any of the route polyline customization parameters listed earlier.\n\n\u003cbr /\u003e\n\nJavaScript\n\n\u003cbr /\u003e\n\n // Color the route polyline objects in green if the vehicle is nearby.\n activePolylineCustomization =\n (params) =\u003e {\n const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;\n if (distance \u003c 1000) {\n\n // params.polylines contains an ordered list of Polyline objects for\n // the path.\n for (const polylineObject of params.polylines) {\n polylineObject.setOptions({strokeColor: 'green'});\n }\n }\n };\n\n\u003cbr /\u003e\n\nTypeScript\n\n\u003cbr /\u003e\n\n // Color the route Polyline objects in green if the vehicle is nearby.\n activePolylineCustomization =\n (params: ShipmentPolylineCustomizationFunctionParams) =\u003e {\n const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;\n if (distance \u003c 1000) {\n\n // params.polylines contains an ordered list of Polyline objects for\n // the path.\n for (const polylineObject of params.polylines) {\n polylineObject.setOptions({strokeColor: 'green'});\n }\n }\n };\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nControl route polyline visibility\n\nBy default, all `Polyline` objects are visible. To make a `Polyline` object\ninvisible, set its [`visible`](/maps/documentation/javascript/reference/polygon#PolylineOptions) property:\n\n\u003cbr /\u003e\n\nJavaScript\n\n\u003cbr /\u003e\n\n remainingPolylineCustomization = {visible: false};\n\n\u003cbr /\u003e\n\nTypeScript\n\n\u003cbr /\u003e\n\n remainingPolylineCustomization = {visible: false};\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e"]]
