במאמר הזה מוסבר איך להתאים אישית את המראה והסגנון של מפה, ואיך לשלוט במידת החשיפה של הנתונים ובאפשרויות של אזור התצוגה. אפשר לעשות זאת בדרכים הבאות:
- שימוש בעיצוב מפות מבוסס-ענן
- הגדרת אפשרויות של סגנון המפה ישירות בקוד שלכם
עיצוב המפה באמצעות עיצוב מפות מבוסס-ענן
כדי להחיל סגנון מפה על מפה של שיתוף מסלול נסיעה ב-JavaScript, צריך לציין mapId
וmapOptions
אחרים כשיוצרים את JourneySharingMapView
.
בדוגמאות הבאות מוצגות דרכים להחלת סגנון מפה באמצעות מזהה מפה.
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
עיצוב מפות ישירות בקוד שלכם
אפשר גם להתאים אישית את הסגנון של המפה על ידי הגדרת אפשרויות המפה כשיוצרים את האובייקט JourneySharingMapView
. בדוגמאות הבאות מוצגות דרכים לעיצוב מפה באמצעות אפשרויות של מפה. מידע נוסף על אפשרויות המפה שאפשר להגדיר זמין במאמר בנושא mapOptions
במאמרי העזרה של Google Maps JavaScript API.
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
שליטה בגישה של ערכת ה-SDK לנתוני המשימות
אתם יכולים לשלוט בחשיפה של אובייקטים מסוימים של משימות במפה באמצעות כללי חשיפה.
ברירת המחדל של הרשאות הגישה לנתוני המשימה
כברירת מחדל, הנתונים של משימות שמוקצות לרכב גלויים כשהרכב נמצא במרחק של עד 5 תחנות מהמשימה. הגישה מסתיימת כשהמשימה מסתיימת או מבוטלת.
בטבלה הזו מוצגת הגדרת ברירת המחדל של החשיפה לכל סוג משימה. אפשר לשנות את הרשאות הגישה של הרבה משימות, אבל לא של כולן. פרטים נוספים על סוגי המשימות זמינים במאמר סוגי משימות במדריך משימות מתוזמנות.
סוג המשימה | ברירת המחדל של היכולת לראות | אפשר להתאים אישית? | תיאור |
---|---|---|---|
משימות שקשורות לזמינות | לא גלוי | לא | משמש להפסקות של הנהג ולתדלוק. אם מסלול למשימת משלוח כולל גם עצירה של רכב אחר, העצירה הזו לא מוצגת אם היא כוללת רק משימות של זמינות. זמן ההגעה המשוער וזמן השלמת המשימה המשוער עדיין מוצגים למשימת המסירה עצמה. |
פתיחת משימות שקשורות לכלי רכב | גלוי | כן | הגישה מסתיימת כשהמשימה הושלמה או בוטלה. אתם יכולים לשנות את הגדרות החשיפה של משימות פתוחות שקשורות לרכב. התאמה אישית של ההגדרה 'הצגת משימות פתוחות שקשורות לכלי רכב' |
משימות שקשורות לכלי רכב ונסגרו | לא גלוי | לא | אי אפשר לשנות את הגדרות החשיפה של משימות שקשורות לרכבים שהוצאו משימוש. |
התאמה אישית של הנראות של משימות פתוחות שקשורות לרכבים
ממשק TaskTrackingInfo
מספק מספר אלמנטים של נתוני משימות
שאפשר להציג באמצעות Consumer SDK.
רכיבי נתוני משימות שניתנים להתאמה אישית | |
---|---|
קווי פוליגון של מסלולים זמן ההגעה המשוער זמן משוער להשלמת המשימה |
מרחק הנהיגה שנותר עד למשימה מספר התחנות שנותרו מיקום הרכב |
אפשרויות הרשאות גישה לכל משימה
כדי להתאים אישית את הגדרת החשיפה לכל משימה בנפרד, צריך להגדיר את TaskTrackingViewConfig
כשיוצרים או מעדכנים משימה ב-Fleet Engine. כדי ליצור קריטריונים לקביעת החשיפה של רכיב במשימה, משתמשים באפשרויות החשיפה הבאות:
אפשרויות של הרשאות גישה | ||
---|---|---|
מספר התחנות שנותרו משך הזמן עד לשעת ההגעה המשוערת מרחק הנסיעה שנותר |
מוצג תמיד לא גלוי אף פעם |
לדוגמה, נניח שהתאמה אישית לדוגמה משנה את ההגדרה של החשיפה של שלושה רכיבי נתונים באמצעות הקריטריונים שמוצגים בטבלה הבאה. כל שאר הרכיבים פועלים לפי כללי ברירת המחדל של החשיפה.
אלמנט הנתונים שרוצים לשנות | חשיפה | קריטריון |
---|---|---|
קו פוליגוני של מסלול | הצגה | הרכב נמצא במרחק של עד 3 תחנות. |
זמן הגעה משוער | הצגה | המרחק שנותר לנסיעה קצר מ-5,000 מטרים. |
מספר התחנות שנותרו | אל תציג לעולם | הרכב נמצא במרחק של עד 3 תחנות. |
בדוגמה הבאה אפשר לראות את ההגדרה הזו:
"taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"estimatedArrivalTimeVisibility": {
"remainingDrivingDistanceMetersThreshold": 5000
},
"remainingStopCountVisibility": {
"never": true
}
}
קווי פוליגון של מסלולים וכללי חשיפה של מיקום הרכב
אי אפשר לראות את קווי המסלול אלא אם רואים גם את מיקום הרכב. אחרת, אפשר להסיק את מיקום הרכב לפי סוף קו המסלול.
ההנחיות האלה יעזרו לכם לספק שילוב תקין של אפשרויות לגבי קו הפוליגון של המסלול והמיקום של הרכב.
אותן אפשרויות גישה | קריטריון החשיפה | הנחיות |
---|---|---|
האפשרות 'קווי מסלול' מוגדרת להצגה תמיד. | הגדרת מיקום הרכב ל'תמיד גלוי'. | |
מיקום הרכב מוגדר למצב 'אף פעם לא גלוי'. | הגדרת קווי מסלול כך שהם אף פעם לא יהיו גלויים. | |
אפשרות החשיפה היא אחת מהאפשרויות הבאות:
|
מגדירים את האפשרויות של קו המסלול לערך שקטן מהערך שהוגדר למיקום הרכב או שווה לו. לדוגמה: "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingStopCountThreshold": 5 }, } |
|
אפשרויות שונות של הרשאת גישה | קריטריונים לחשיפה | הנחיות |
מיקום הרכב גלוי | זה קורה רק כששתי האפשרויות של מיקום הרכב והצגת קו פוליגוני מתקיימות. לדוגמה: "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingDrivingDistanceMetersThreshold": 3000 }, } בדוגמה הזו, מיקום הרכב גלוי רק אם מספר התחנות שנותרו הוא לפחות 3 וגם אם מרחק הנסיעה שנותר הוא לפחות 3,000 מטרים. |
השבתת ההתאמה האוטומטית
כדי למנוע את ההתאמה האוטומטית של אזור התצוגה לרכב ולמסלול הצפוי, אפשר להשבית את ההתאמה האוטומטית. בדוגמה הבאה מוצג איך להשבית את ההתאמה האוטומטית כשמגדירים את תצוגת המפה של שיתוף המסלול.
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});