במסמך הזה נסביר איך להתאים אישית את המראה והתחושה של מסלולים לכלי רכב במעקב במפה. המסלולים מוצגים במפה כקווים פוליגונים. לכל זוג קואורדינטות בנתיב הפעיל או שנותר ברכב, הספרייה יוצרת אובייקט google.maps.Polyline
.
אפשר לעצב את האובייקטים Polyline
על ידי ציון התאמות אישיות של קווים פוליגוניים שהספרייה מחילה לאחר מכן בשני מצבים:
- לפני שמוסיפים את הפריטים למפה
- כשהנתונים ששימשו לאובייקטים משתנים
עיצוב קווים פוליגונים
בדומה לאופן שבו אפשר להתאים אישית סמנים, אפשר לעצב קווים פוליגונליים של מסלולים בדרכים שונות:
עיצוב קווים פוליגונים של מסלולים לפי סוג: משתמשים ב-
PolylineOptions
כדי להחיל את העיצוב על כל אובייקטי ה-Polyline
שתואמים לקריטריונים כשהם נוצרים או מתעדכנים. דוגמה לכך מופיעה במאמר עיצוב קווים פוליגונליים לפי סוג.סגנון של קווים פוליגוניים למסלולים שמבוססים על נתונים: ציון פונקציית התאמה אישית שמבוססת על נתונים ממעקב אחרי כלל המכשירים בארגון או ממקורות חיצוניים:
נתונים ממעקב אחרי כלל המכשירים: מעקב אחר כלל המכשירים בארגון מעביר נתונים של קווים פוליגוניים לפונקציית ההתאמה האישית, כולל נתונים על מצב הרכב הנוכחי. אפשר לעצב קווים פוליגוניים על סמך הנתונים האלה, כולל לצבוע את האובייקט
Polyline
בגוון עמוק יותר או להפוך אותו לעבה יותר כשהרכב נע לאט יותר.מקורות חיצוניים: אפשר לשלב נתוני מעקב אחרי צי עם נתונים ממקורות מחוץ ל-Fleet Engine ולעצב את האובייקט
Polyline
על סמך המידע הזה.
לדוגמה, ראו סגנון של קווים פוליגוניים שמבוססים על נתונים.
שליטה בחשיפה של קווים פוליגונליים של מסלולים: אפשר להסתיר או להציג קווים פוליגונליים באמצעות המאפיין
visible
. פרטים נוספים זמינים בקטע שליטה בחשיפה של קווים פוליגונליים במדריך הזה.הצגת מידע נוסף על סמן של רכב או מיקום: אפשר להציג מידע נוסף באמצעות המאפיין
infowindow
. לפרטים, ראו הצגת מידע נוסף על רכב או סמן מיקום במדריך הזה.
אפשרויות התאמה אישית של קווים פוליגונים
אפשרויות ההתאמה האישית הבאות זמינות גם ב-FleetEngineVehicleLocationProviderOptions
וגם ב-FleetEngineDeliveryVehicleLocationProviderOptions
.
אפשר להגדיר התאמות אישיות למצבים שונים של נתיב במסלול של הרכב:
נתיב שכבר נסע בו: משתמשים ב-
takenPolylineCustomization
– נסיעות על פי דרישה, משימות מתוזמנות.נתיב נסיעה פעיל: משתמשים ב-
activePolylineCustomization
– נסיעות על פי דרישה ומשימות מתוזמנות.נתיב שטרם נסע בו: אפשר להשתמש ב-
remainingPolylineCustomization
– נסיעות על פי דרישה, משימות מתוזמנות.
סגנון של קווים פוליגוניים לפי סוג
כדי לעצב קווים פוליגוניים לניתוב לפי סוג, משנים את העיצוב של אובייקטים של Polyline
באמצעות PolylineOptions
.
בדוגמה הבאה מוסבר איך להגדיר את העיצוב של אובייקט Polyline
באמצעות PolylineOptions
. פועלים לפי התבנית הזו כדי להתאים אישית את הסגנון של כל אובייקט Polyline
באמצעות אחת מההתאמות האישיות של קווים פוליגונליים של מסלולים שמפורטות בקטע אפשרויות התאמה אישית של קווים פוליגונליים במדריך הזה.
דוגמה לנסיעות על פי דרישה או למשימות מתוזמנות
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
עיצוב קווים פוליגונים של מסלולים באמצעות נתונים
כדי לשנות את הסגנון של קווים פוליגונליים של מסלולים באמצעות נתונים, משנים את הסגנון של אובייקטים מסוג Polyline
באמצעות פונקציות התאמה אישית.
בדוגמה הבאה מוסבר איך להגדיר את העיצוב של מסלול פעיל באמצעות פונקציית התאמה אישית. פועלים לפי התבנית הזו כדי להתאים אישית את הסגנון של כל אובייקט Polyline
באמצעות אחד מהפרמטרים של ההתאמה האישית של קווים פוליגונליים שמפורטים בקטע אפשרויות התאמה אישית של קווים פוליגונליים במדריך הזה.
דוגמה לנסיעות על פי דרישה
JavaScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.vehicle.waypoints[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 Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params: VehiclePolylineCustomizationFunctionParams) => {
const distance = params.vehicle.waypoints[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'});
}
}
};
דוגמה למשימות מתוזמנות
JavaScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.deliveryVehicle.remainingDistanceMeters;
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 Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params: DeliveryVehiclePolylineCustomizationFunctionParams) => {
const distance = params.deliveryVehicle.remainingDistanceMeters;
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'});
}
}
};
דוגמה לסגנון מבוסס-תנועה (נסיעות על פי דרישה בלבד)
Fleet Engine מחזיר נתונים על מהירות התנועה של הנתיבים הפעילים ושל הנתיבים שנותרו בכלי הרכב שבמעקב. אפשר להשתמש במידע הזה כדי לעצב אובייקטים מסוג Polyline
בהתאם למהירויות התנועה שלהם:
JavaScript
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;
// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
(params) => {
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
for (const polylineObject of params.polylines) {
if (polylineObject.get('strokeColor') === '#05f') {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
TypeScript
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;
// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
(params: VehiclePolylineCustomizationFunctionParams) => {
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
for (const polylineObject of params.polylines) {
if (polylineObject.get('strokeColor') === '#05f') {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
שליטה בחשיפה של קווים פוליגונים
כברירת מחדל, כל האובייקטים מסוג Polyline
גלויים. כדי להפוך אובייקט Polyline
לא בלתי נראה, מגדירים את המאפיין visible
שלו לערך false
.
דוגמה לנסיעות על פי דרישה או למשימות מתוזמנות
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
הצגת חלון מידע של רכב או סמן מיקום
אפשר להשתמש ב-InfoWindow
כדי להציג מידע נוסף על רכב או על סמן מיקום.
בדוגמה הבאה מוסבר איך ליצור InfoWindow
ולצרף אותו לסמן של רכב.
דוגמה לנסיעות על פי דרישה
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
if (e.vehicle) {
const distance =
e.vehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next drop-off point.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
}
});
// 3. Close the info window.
infoWindow.close();
TypeScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
if (e.vehicle) {
const distance =
e.vehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next drop-off.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
}
});
// 3. Close the info window.
infoWindow.close();
דוגמה למשימות מתוזמנות
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
if (e.deliveryVehicle) {
const distance =
e.deliveryVehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next task.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
}
});
// 3. Close the info window.
infoWindow.close();
TypeScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
if (e.deliveryVehicle) {
const distance =
e.deliveryVehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next task.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
}
});
// 3. Close the info window.
infoWindow.close();