این سند نحوه سفارشی‌سازی چندخطی‌های مسیر را برای نقشه‌ای که در برنامه ردیابی سفر مبتنی بر وب خود برای کاربران مصرف‌کننده استفاده می‌کنید، پوشش می‌دهد.
با Consumer SDK، می‌توانید نمایان بودن چندخطی مسیر را کنترل کنید یا چندخطی مسیر را برای مسیر سفر در نقشه سبک‌بندی کنید. کیت توسعه نرم‌افزار برای هر جفت مختصات در مسیر فعال یا باقی‌مانده سفر، یک شیء google.maps.Polyline ایجاد می‌کند. سپس کتابخانه این سفارشی‌سازی‌ها را در دو موقعیت اعمال می‌کند:
- پیش‌از افزودن اشیا به نقشه
- وقتی داده‌های استفاده‌شده برای اشیاء تغییر کرده باشد
سبک چندخطی‌های مسیر
همان‌طور که می‌توانید نشانگرها را سبک‌بندی کنید، می‌توانید چندخطی‌های مسیر را نیز بااستفاده از پارامترهای سفارشی‌سازی سبک‌بندی کنید. از آنجا، بااستفاده از یکی از رویکردهای زیر، سبک‌بندی را پیکربندی می‌کنید:
- ساده‌ترین: از
PolylineOptionsبرای اعمال به همه اشیاءPolylineمطابقت‌داده‌شده هنگام ایجاد یا به‌روزرسانی آن‌ها استفاده کنید. - پیشرفته: یک تابع سفارشی‌سازی مشخص کنید.
توابع سفارشی‌سازی امکان سبک‌بندی جداگانه اشیا را براساس داده‌های ارسال‌شده توسط Fleet Engine فراهم می‌کنند. این تابع می‌تواند سبک هر شیء را براساس وضعیت فعلی سفر تغییر دهد؛ برای مثال، رنگ شیء
Polylineرا تیره‌تر کند یا وقتی وسیله نقلیه آهسته‌تر حرکت می‌کند، آن را ضخیم‌تر کند. حتی می‌توانید از منابع خارج از Fleet Engine دوباره بپیوندید و شیءPolylineرا براساس آن اطلاعات سبک‌بندی کنید.
پارامترهای سفارشی‌سازی
هنگام سبک‌دهی به چندخطی‌های مسیر، از پارامترهای ارائه‌شده در
FleetEngineTripLocationProviderOptions استفاده می‌کنید. این پارامترها برای
وضعیت‌های مختلف مسیر در سفر خودرو به‌صورت زیر ارائه می‌شوند:
- مسیرهای قبلاً طی‌شده: از
takenPolylineCustomizationاستفاده کنید. - مسیر فعال: از
activePolylineCustomizationاستفاده کنید. - مسیر هنوز طی‌نشده: از
remainingPolylineCustomizationاستفاده کنید.
استفاده از 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.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 آن را تنظیم کنید:
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};