سفارشی کردن چند خطوط مسیر
با مجموعه‌ها، منظم بمانید
ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.
پلتفرم را انتخاب کنید: Android iOS JavaScript این سند نحوه سفارشی کردن چند خطوط مسیر را برای نقشه ای که در برنامه ردیابی سفر مبتنی بر وب خود برای کاربران مصرف کننده استفاده می کنید را پوشش می دهد.
با Consumer SDK، می‌توانید دید چند خط مسیر را کنترل کنید یا چند خط مسیر را برای مسیر سفر روی نقشه سبک کنید. SDK یک شی google.maps.Polyline برای هر جفت مختصات در مسیر فعال یا باقیمانده سفر ایجاد می کند. سپس کتابخانه این سفارشی سازی ها را در دو موقعیت اعمال می کند:
- قبل از اضافه کردن اشیا به نقشه
- هنگامی که داده های مورد استفاده برای اشیاء تغییر کرده است
چند خط مسیر سبک
مشابه نحوه استایل دادن به نشانگرها، چند خط مسیر را با استفاده از پارامترهای سفارشی‌سازی استایل می‌دهید. از آنجا، استایل را با استفاده از یکی از رویکردهای زیر پیکربندی می‌کنید:
- ساده‌ترین : از
PolylineOptions برای اعمال بر روی تمام اشیاء Polyline منطبق هنگام ایجاد یا به‌روزرسانی استفاده کنید. - پیشرفته : یک تابع سفارشی سازی را مشخص کنید. توابع سفارشی‌سازی امکان استایل‌سازی فردی اشیاء را بر اساس داده‌های ارسال شده توسط Fleet Engine فراهم می‌کنند. این تابع می تواند استایل هر شی را بر اساس وضعیت فعلی سفر تغییر دهد. به عنوان مثال، شیء
Polyline را با سایه عمیق تر رنگ آمیزی کنید، یا زمانی که وسیله نقلیه کندتر حرکت می کند، آن را ضخیم تر کنید. حتی می‌توانید از منابع خارج از Fleet Engine به آن بپیوندید و شی Polyline را بر اساس آن اطلاعات استایل دهید.
پارامترهای سفارشی سازی
هنگام استایل کردن چند خطوط مسیر، از پارامترهای ارائه شده در FleetEngineTripLocationProviderOptions استفاده می کنید. این پارامترها حالت های مسیر متفاوتی را در سفر وسیله نقلیه به شرح زیر ارائه می کنند:
از 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.trip.remainingWaypoints[0].distanceMeters;
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: TripPolylineCustomizationFunctionParams) => {
const distance = params.trip.remainingWaypoints[0].distanceMeters;
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-08-29 بهوقت ساعت هماهنگ جهانی.
[null,null,["تاریخ آخرین به‌روزرسانی 2025-08-29 بهوقت ساعت هماهنگ جهانی."],[[["\u003cp\u003eThis documentation explains how to customize the appearance of route polylines within web-based journey tracking applications using the Consumer SDK.\u003c/p\u003e\n"],["\u003cp\u003eYou can customize the style of polylines representing the traveled, active, and remaining portions of a journey's route.\u003c/p\u003e\n"],["\u003cp\u003eStyling can be achieved using simple \u003ccode\u003ePolylineOptions\u003c/code\u003e for uniform styling or with customization functions for dynamic, data-driven styling based on the trip's state.\u003c/p\u003e\n"],["\u003cp\u003eRoute polyline visibility can be controlled by setting the \u003ccode\u003evisible\u003c/code\u003e property to \u003ccode\u003efalse\u003c/code\u003e for the desired polyline customization parameter.\u003c/p\u003e\n"]]],["This document details customizing route polylines in web-based journey tracking apps using the Consumer SDK. You can control the visibility and style of route polylines via `PolylineOptions` for simple styling or through customization functions for more dynamic styling, based on data from Fleet Engine or external sources. Polylines can be customized for \"already traveled,\" \"actively traveled,\" and \"not-yet traveled\" paths using `takenPolylineCustomization`, `activePolylineCustomization`, and `remainingPolylineCustomization` parameters respectively. Visibility can be toggled using the `visible` property.\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\n\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.\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[`FleetEngineTripLocationProviderOptions`](/maps/documentation/javascript/reference/journey-sharing-trip-and-order-progress#FleetEngineTripLocationProviderOptions). 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-trip-and-order-progress#FleetEngineTripLocationProviderOptions.takenPolylineCustomization).\n- **Actively traveled** path: Use [`activePolylineCustomization`](/maps/documentation/javascript/reference/journey-sharing-trip-and-order-progress#FleetEngineTripLocationProviderOptions.activePolylineCustomization).\n- **Not-yet traveled** path: Use [`remainingPolylineCustomization`](/maps/documentation/javascript/reference/journey-sharing-trip-and-order-progress#FleetEngineTripLocationProviderOptions.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.trip.remainingWaypoints[0].distanceMeters;\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: TripPolylineCustomizationFunctionParams) =\u003e {\n const distance = params.trip.remainingWaypoints[0].distanceMeters;\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"]]
