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