עיצוב מפה

במאמר הזה נסביר איך להתאים אישית את המראה והסגנון של מפה, ואיך לשלוט באפשרויות של נראות הנתונים וחלון התצוגה. אפשר לעשות זאת בדרכים הבאות:

  • שימוש בעיצוב מפות מבוסס-ענן
  • הגדרת אפשרויות של סגנון המפה ישירות בקוד שלכם

עיצוב המפה באמצעות עיצוב מפות מבוסס-ענן

כדי להחיל סגנון מפה על מפה של שיתוף מסלול נסיעה ב-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 במאמרי העזרה של ה-API של Google Maps JavaScript.

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,
  ...
});

המאמרים הבאים