מסמך זה מתאר כיצד להתאים אישית קווים פוליגוניים של נתיבים במפה שבה אתה משתמש אפליקציה מבוססת-אינטרנט למעקב אחר המסלול למשתמשים צרכנים.
באמצעות Consumer SDK ניתן לשלוט בחשיפה של קו פוליגוני של המסלול או לעצב את
נתיב פוליגוני של מסלול הנסיעה במפה. ה-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};