מסמך זה מתאר כיצד להתאים אישית קווים פוליגוניים של נתיבים במפה שבה אתה משתמש אפליקציה מבוססת-אינטרנט למעקב אחר מסלול למשתמשים פרטיים ומפעילי צי.
באמצעות Consumer SDK ניתן לשלוט בחשיפה של קו פוליגוני של המסלול או לעצב את
נתיב פוליגוני של מסלול הנסיעה במפה. ה-SDK יוצר
אובייקט google.maps.Polyline
לכל זוג קואורדינטות במסלול
נתיב פעיל או שנותר. לאחר מכן הספרייה מחילה את ההתאמות האישיות האלה
בשני מצבים:
- לפני שמוסיפים את האובייקטים למפה
- כשהנתונים ששימשו לאובייקטים השתנו
סגנון של קווים פוליגוניים
בדומה לאופן שבו ניתן לעצב סמנים, מעצבים קווים פוליגוניים באמצעות פרמטרים של התאמה אישית. משם, אפשר להגדיר את העיצוב באמצעות אחת הגישות הבאות:
- הפשוט ביותר: משתמשים ב-
PolylineOptions
כדי להחיל על כל נמצאה התאמה ל-Polyline
אובייקטים כאשר הם נוצרים או מעודכנים. - מתקדם: מציינים פונקציית התאמה אישית.
פונקציות ההתאמה האישית מאפשרות עיצוב אישי של האובייקטים על סמך
שנשלחו על ידי Fleet Engine. הפונקציה יכולה לשנות את הסגנון של כל אחד מהמכשירים
מבוסס על המצב הנוכחי של התהליך. לדוגמה, לצבוע
Polyline
חפץ הצללה עמוקה יותר, או לעבה יותר כשהרכב לאט יותר. אפשר אפילו להצטרף ממקורות מחוץ ל-Fleet Engine וסגנון את האובייקטPolyline
על סמך המידע הזה.
פרמטרים של התאמה אישית
כשמעצבים קווים פוליגוניים של נתיבים, צריך להשתמש בפרמטרים שסופקו ב-
FleetEngineShipmentLocationProviderOptions
הפרמטרים האלה מספקים
בין המצבים השונים במסלול הנסיעה של הרכב, כך:
- נתיבים שכבר נסעתם בהם: משתמשים ב-
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.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};