سفارشی کردن چند خطوط مسیر
با مجموعه‌ها، منظم بمانید
ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.
این سند نحوه سفارشی‌سازی چند خطوط مسیر را برای نقشه‌ای که در برنامه ردیابی سفر مبتنی بر وب خود برای کاربران مصرف‌کننده و اپراتورهای ناوگان استفاده می‌کنید را پوشش می‌دهد.
با Consumer SDK، می‌توانید دید چند خط مسیر را کنترل کنید یا چند خط مسیر را برای مسیر سفر روی نقشه سبک کنید. SDK یک شی google.maps.Polyline برای هر جفت مختصات در مسیر فعال یا باقیمانده سفر ایجاد می کند. سپس کتابخانه این سفارشی سازی ها را در دو موقعیت اعمال می کند:
- قبل از اضافه کردن اشیا به نقشه
- هنگامی که داده های مورد استفاده برای اشیاء تغییر کرده است
چند خط مسیر سبک
مشابه نحوه استایل دادن به نشانگرها، چند خط مسیر را با استفاده از پارامترهای سفارشی‌سازی استایل می‌دهید. از آنجا، استایل را با استفاده از یکی از رویکردهای زیر پیکربندی می‌کنید:
- ساده‌ترین : از
PolylineOptions برای اعمال بر روی تمام اشیاء Polyline منطبق هنگام ایجاد یا به‌روزرسانی استفاده کنید. - پیشرفته : یک تابع سفارشی سازی را مشخص کنید. توابع سفارشی‌سازی امکان استایل‌سازی فردی اشیاء را بر اساس داده‌های ارسال شده توسط Fleet Engine فراهم می‌کنند. این تابع می تواند استایل هر شی را بر اساس وضعیت فعلی سفر تغییر دهد. به عنوان مثال، شیء
Polyline را با سایه عمیق تر رنگ آمیزی کنید، یا زمانی که وسیله نقلیه کندتر حرکت می کند، آن را ضخیم تر کنید. حتی می‌توانید از منابع خارج از Fleet Engine به آن بپیوندید و شی Polyline را بر اساس آن اطلاعات استایل دهید.
پارامترهای سفارشی سازی
هنگام استایل کردن چند خطوط مسیر، از پارامترهای ارائه شده در FleetEngineShipmentLocationProviderOptions استفاده می کنید. این پارامترها حالت های مسیر متفاوتی را در سفر وسیله نقلیه به شرح زیر ارائه می کنند:
از PolylineOptions استفاده کنید
مثال زیر نحوه پیکربندی یک ظاهر طراحی شده برای یک شی Polyline را با PolylineOptions نشان می دهد. این الگو را دنبال کنید تا با استفاده از هر یک از سفارشی‌سازی‌های چند خطی که قبلاً ذکر شد، استایل هر شی Polyline را سفارشی کنید.
جاوا اسکریپت
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
از توابع سفارشی سازی برای استایل کردن چند خط مسیر استفاده کنید
مثال زیر نحوه پیکربندی استایل را برای چند خط مسیر فعال نشان می دهد. این الگو را دنبال کنید تا با استفاده از هر یک از پارامترهای سفارشی سازی مسیر چند خطی که قبلا ذکر شد، استایل هر شی Polyline را سفارشی کنید.
جاوا اسکریپت
// 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 آن را تنظیم کنید:
جاوا اسکریپت
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
جز در مواردی که غیر از این ذکر شده باشد،محتوای این صفحه تحت مجوز Creative Commons Attribution 4.0 License است. نمونه کدها نیز دارای مجوز Apache 2.0 License است. برای اطلاع از جزئیات، به خطمشیهای سایت Google Developers مراجعه کنید. جاوا علامت تجاری ثبتشده Oracle و/یا شرکتهای وابسته به آن است.
تاریخ آخرین به‌روزرسانی 2025-09-03 بهوقت ساعت هماهنگ جهانی.
[null,null,["تاریخ آخرین به‌روزرسانی 2025-09-03 بهوقت ساعت هماهنگ جهانی."],[[["\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"]]
