מעקב אחר הצי שלך באמצעות ספריית המעקב של המאגר של JavaScript

המוצר או התכונה הזו נמצאים בגרסת טרום-GA (גרסת טרום-GA). התמיכה במוצרים ובתכונות טרום-GA עשויה להיות מוגבלת, ויכול להיות ששינויים במוצרים ובתכונות טרום-GA לא יתאימו לגרסאות אחרות של טרום-GA. מוצרים במצב טרום-GA מכוסים על ידי התנאים הספציפיים לשירות בפלטפורמה של מפות Google. למידע נוסף, עיינו בתיאורים של שלבי ההשקה.

ספריית המעקב אחר צי של JavaScript מאפשרת לכם להמחיש את המיקומים של כלי הרכב בצי שלכם כמעט בזמן אמת. הספרייה משתמשת ב-On Demands and Deliveries API כדי לאפשר הצגה חזותית של רכבים וגם נסיעות. ספריית המעקב של JavaScript Fleet כוללת רכיב מפה של JavaScript שהוא תחליף לישות google.maps.Map רגילה ולרכיבי נתונים לצורך חיבור עם Fleet Engine.

רכיבים

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

תצוגת מפה למעקב אחר כלל המכשירים בארגון

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

ספקי מיקום

ספקי מיקום עובדים עם מידע ששמור ב-Flet Engine כדי לשלוח פרטי מיקום של אובייקטים שנמצאים במעקב למפה לשיתוף התהליך.

ספק מיקום של רכב

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

ספק שירותי המיקום של כלי הרכב

ספק שירותי המיקום של הצי מציג פרטי מיקום של כלי רכב מרובים. אפשר לסנן כדי להציג רכב ספציפי ואת המיקום שלו, או להציג את מיקומי הרכבים לכל הצי.

שליטה בחשיפה של מיקומים במעקב

כללי החשיפה קובעים מתי אובייקט של מיקום במעקב גלוי במפה עבור ספק המיקום של Fleet Engine. הערה – שימוש בספק מיקום מותאם אישית או נגזר של מיקום עשוי לשנות את כללי הרשאות הגישה.

רכבים

אפשר לראות רכב מיד כשיוצרים אותו ב-Flet Engine, ואפשר לראות אותו כשערך של Automotive_state הוא Online. כלומר, הרכב יכול להיות גלוי גם אם לא הוקצתה נסיעה כרגע לרכב.

סמני מיקום של נקודות ציון

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

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

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

תחילת העבודה עם ספריית המעקב אחר Fleet של JavaScript

לפני שמשתמשים בספריית המעקב אחר Fleet של JavaScript, חשוב להכיר את Fleet Engine ולדעת איך לקבל מפתח API. לאחר מכן יוצרים הצהרת בעלות על מזהה נסיעה ומזהה רכב.

יצירת הצהרה על מזהה נסיעה והצהרה על מזהה רכב

כדי לעקוב אחרי כלי רכב באמצעות ספק מיקום הרכב, צריך ליצור אסימון אינטרנט מסוג JSON (JWT) עם מזהה נסיעה והצהרה על מזהה הרכב.

כדי ליצור את המטען הייעודי (payload) של JWT, מוסיפים הצהרה נוספת בקטע ההרשאה עם המפתחות tripid ו-vehicleid, ומגדירים את value של כל מפתח כ-*. יצירת האסימון מתבצעת באמצעות התפקיד Fleet Engine Service Super User ב-Cloud IAM. חשוב לשים לב שהענקת גישה רחבה ליצירה, לקריאה ולשינוי של ישויות מנוע Fleet, ויש לשתף אותן רק עם משתמשים מהימנים.

הדוגמה הבאה מציגה איך ליצור אסימון למעקב לפי רכב ומשימה:

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "[e-mail]",
  "sub": "[e-mail]",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
    "tripid": "*",
    "vehicleid": "*",
  }
}

יצירת מאחזר אסימון אימות

ספריית המעקב אחר אסימוני JavaScript מבקשת אסימון באמצעות מאחזר אסימוני האימות בכל אחד מהתנאים הבאים:

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

אחרת, הספרייה משתמשת באסימון הקודם שעדיין תקף, ולא קוראת למאחזר.

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

המאחזר צריך להחזיר מבנה נתונים עם שני שדות שארוזים ב-Promise:

• מחרוזת token.
• מספר expiresInSeconds. התוקף של אסימון פג בפרק הזמן הזה אחרי השליפה.

הדוגמה הבאה מציגה איך ליצור מאחזר אסימון אימות:

JavaScript

function authTokenFetcher(options) {
  // options is a record containing two keys called
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.Token,
    expiresInSeconds: data.ExpiresInSeconds
  };
}

TypeScript

function authTokenFetcher(options: {
  serviceType: google.maps.journeySharing.FleetEngineServiceType,
  context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
  // The developer should generate the correct
  // SERVER_TOKEN_URL based on options.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.token,
    expiresInSeconds: data.expiration_timestamp_ms - Date.now(),
  };
}

כשמטמיעים את נקודת הקצה בצד השרת לטביעת האסימונים, חשוב לזכור את הנקודות הבאות:

• נקודת הקצה צריכה להחזיר זמן תפוגה לאסימון. בדוגמה שלמעלה, היא מוגדרת כ-data.ExpiresInSeconds.
• מאחזר אסימון האימות צריך להעביר את זמן התפוגה (בשניות, מזמן האחזור) לספרייה, כפי שמוצג בדוגמה.
• ה-Server_TOKEN_URL תלוי בהטמעה של הקצה העורפי שלך. אלה כתובות URL לדוגמה:
  • https://SERVER_URL/token/driver/VEHICLE_ID
  • https://SERVER_URL/token/consumer/TRIP_ID
  • https://SERVER_URL/token/fleet_reader

טעינת מפה מ-HTML

הדוגמה הבאה ממחישה איך לטעון את הספרייה של שיתוף מסע ב-JavaScript מכתובת URL ספציפית. הפרמטר callback מפעיל את הפונקציה initMap אחרי שה-API נטען. המאפיין defer מאפשר לדפדפן להמשיך לעבד את שאר הדף בזמן שה-API נטען.

 <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing&v=beta" defer></script>

מעקב אחר כלי רכב

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

הדמיה של ספק מיקום של רכב

ספריית המעקב אחר Fleet ב-JavaScript מגדירה מראש ספק מיקום ל-OnDemand Rides and Deliveries API. כדי ליצור אותו, השתמשו במזהה הפרויקט ובהפניה למפעל האסימונים שלכם.

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

הפעלה של תצוגת המפה

לאחר הטעינה של ספריית JavaScript Journey Sharing, הפעילו את תצוגת המפה והוסיפו אותה לדף ה-HTML. הדף צריך להכיל רכיב <div> שמכיל את תצוגת המפה. בדוגמה הבאה, האלמנט <div> נקרא map_canvas.

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
                        = 'your-vehicle-id';

// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId = 'your-vehicle-id';

// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

האזנה לאירועי שינוי

אפשר לאחזר מטא מידע על רכב מהאובייקט vehicle באמצעות ספק המיקום. המטא-נתונים כוללים את זמן ההגעה המשוער ואת המרחק שנותר לפני האיסוף או ההמראה הבאים של הרכב. שינויים במטא-מידע מפעילים אירוע update. הדוגמה הבאה ממחישה איך להאזין לאירועי השינוי האלה.

JavaScript

locationProvider.addListener('update', e => {
  // e.vehicle contains data that may be
  // useful to the rest of the UI.
  if (e.vehicle) {
    console.log(e.vehicle.vehicleState);
  }
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  // e.vehicle contains data that may be useful to the rest of the UI.
  if (e.vehicle) {
    console.log(e.vehicle.vehicleState);
  }
});

האזנה לשגיאות

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

JavaScript

locationProvider.addListener('error', e => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

TypeScript

locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

הפסקת מעקב

כדי שספק המיקום לא יוכל לעקוב אחרי הרכב, צריך להסיר את מזהה הרכב מספק המיקום.

JavaScript

locationProvider.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

הסרת ספק המיקום מתצוגת המפה

הדוגמה הבאה מראה איך להסיר ספק מיקום מתצוגת המפה.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

הצגת צי כלי רכב

בקטע הזה נסביר איך להשתמש בספרייה של JavaScript Journey Share (שיתוף מסלול) כדי להציג צי של כלי רכב. לפני שמריצים את הקוד, חשוב לטעון את הספרייה מפונקציית הקריאה החוזרת שצוינה בתג הסקריפט.

יצירת מודמים של ספק מיקום של צי רכב

ה-JavaScript Fleet Tracking Library מגדיר מראש ספק מיקום שמאחזר מספר כלי רכב מ-On Demand Rides and Deliveries API. כדי ליצור אותו, השתמשו במזהה הפרויקט ובהפניה למאחזר האסימונים.

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

המונח vehicleFilter מציין שאילתה המשמשת לסינון כלי רכב שמוצגים במפה. המסנן הזה מועבר ישירות אל Fleet Engine. הפורמטים הנתמכים מפורטים ב-ListVehiclesRequest.

המדיניות locationRestriction מגבילה את האזור שבו יוצגו כלי רכב במפה. הוא גם קובע אם המעקב אחר המיקום פעיל או לא. המעקב אחר המיקום יתחיל רק אחרי שתגדירו את ההגדרה הזו.

אחרי שיוצרים את ספק המיקום, מפעילים את תצוגת המפה.

הגדרה של הגבלת מיקום באמצעות אזור התצוגה של המפה

אפשר להגדיר את הגבולות של locationRestriction כך שיתאימו לאזור שמוצג בתצוגת המפה.

JavaScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

TypeScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

האזנה לאירועי שינוי

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

JavaScript

locationProvider.addListener('update', e => {
  // e.vehicles contains data that may be
  // useful to the rest of the UI.
  if (e.vehicles) {
    for (vehicle of e.vehicles) {
      console.log(vehicle.navigationStatus);
    }
  }
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineFleetLocationProviderUpdateEvent) => {
  // e.vehicles contains data that may be useful to the rest of the UI.
  if (e.vehicles) {
    for (vehicle of e.vehicles) {
      console.log(vehicle.navigationStatus);
    }
  }
});

האזנה לשגיאות

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

הפסקת מעקב

כדי שספק המיקום לא יעקוב אחרי הצי, צריך להגדיר את הגבולות של ספק המיקום ל-null.

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

הסרת ספק המיקום מתצוגת המפה

הדוגמה הבאה מראה איך להסיר ספק מיקום מתצוגת המפה.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

התאמה אישית של המראה והתחושה של המפה הבסיסית

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

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

סגנון מפות מבוסס-ענן מאפשר ליצור ולערוך סגנונות מפה לכל אפליקציה שמשתמשת במפות Google דרך מסוף Google Cloud, בלי שתצטרכו לבצע שינויים בקוד. סגנונות המפה נשמרים כמזהי מפות בפרויקט ב-Cloud. על מנת להחיל סגנון על מפת המעקב של JavaScript Fleet Tracking, עליכם לציין mapId כשיוצרים את JourneySharingMapView. אי אפשר לשנות או להוסיף את השדה mapId אחרי יצירת האובייקט של JourneySharingMapView. הדוגמה הבאה ממחישה איך להפעיל סגנון מפה שנוצר בעבר באמצעות מזהה מפה.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
});

שימוש בעיצוב מפה מבוסס-קוד

דרך נוספת להתאמה אישית של עיצוב המפה היא להגדיר את mapOptions כשיוצרים את JourneySharingMapView.

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" }
        ]
      }
    ]
  }
});

שימוש בהתאמות אישיות של סמנים

באמצעות ספריית המעקב אחר צי של JavaScript, תוכלו להתאים אישית את המראה והתחושה של הסמנים שנוספו למפה. כדי לעשות זאת, אתם יכולים לציין התאמות אישיות של סמנים, שאותן ספריית המעקב של Fleet תחיל לפני הוספת הסמנים למפה ובכל עדכון של הסמנים.

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

כאפשרות מתקדמת יותר, ניתן לציין פונקציית התאמה אישית. פונקציות התאמה אישית מאפשרות לעצב את הסמנים על סמך נתונים, וגם להוסיף אינטראקטיביות לסמנים, כמו טיפול בקליקים. באופן ספציפי, המעקב אחר Fleet מעביר נתונים לפונקציית ההתאמה האישית לגבי סוג האובייקט שהסמן מייצג: רכב, עצירה או משימה. כך ניתן לשנות את עיצוב הסמנים בהתאם למצב הנוכחי של רכיב הסמן עצמו. לדוגמה, מספר העצירות שנותרו או סוג המשימה. תוכלו אפילו לאחד את הנתונים מול נתונים ממקורות מחוץ ל-Feet Engine ולעצב את הסמן על סמך המידע הזה.

בנוסף, ניתן להשתמש בפונקציות של התאמה אישית כדי לסנן את החשיפה של הסמנים. כדי לעשות זאת, מתקשרים אל setVisible(false) על הסמן.

עם זאת, כדי לשפר את הביצועים, מומלץ לסנן באמצעות הסינון המקורי של ספק המיקום, כמו FleetEngineFleetLocationProvider.vehicleFilter. עם זאת, אם אתם זקוקים לפונקציונליות נוספת של סינון, תוכלו להחיל את הסינון באמצעות פונקציית ההתאמה האישית.

ספריית המעקב אחר כלל המכשירים כוללת את הפרמטרים הבאים של התאמה אישית:

• FleetEngineVehicleLocationProviderOptions
  • vehicleMarkerCustomization
  • originMarkerCustomization
  • destinationMarkerCustomization
  • intermediateDestinationMarkerCustomization
• FleetEngineFleetLocationProviderOptions
  • vehicleMarkerCustomization

שינוי הסגנון של הסמנים באמצעות MarkerOptions

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

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

שינוי הסגנון של הסמנים באמצעות פונקציות של התאמה אישית

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

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

הוספת טיפול בקליקים לסמנים

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

JavaScript

vehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

סנן סמנים גלויים

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

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
      if (remainingWaypoints > 10) {
        params.marker.setVisible(false);
      }
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

שימוש בהתאמה אישית של פוליגונים למעקב אחרי רכב

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

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

באופן דומה, אפשר לציין פונקציית התאמה אישית. פונקציות של התאמה אישית מאפשרות לעצב את האובייקטים באופן אינדיבידואלי על סמך נתונים שנשלחים על ידי Fleet Engine. הפונקציה יכולה לשנות את הסגנון של כל אובייקט על סמך המצב הנוכחי של הרכב. לדוגמה, צבע האובייקט Polyline בגוון עמוק יותר, או הפיכתו לעבה יותר כשהרכב נע לאט יותר. אפשר אפילו להצטרף נגד ממקורות מחוץ ל-Feet Engine ולעצב את האובייקט Polyline על סמך המידע הזה.

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

• 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'});
      }
    }
  };

שליטה בחשיפה של Polyline אובייקטים

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

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

עיבוד Polyline אובייקטים תוך התייחסות לתנועה

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'});
      }
    }
  };

הצגת InfoWindow של רכב או סמן מיקום

אפשר להשתמש ב-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

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

החלפת מפה קיימת

ניתן להחליף מפה קיימת שכוללת סמנים או התאמות אישיות אחרות, בלי לאבד את ההתאמות האישיות.

לדוגמה, נניח שיש לכם דף אינטרנט עם ישות google.maps.Map רגילה שבה מוצג סמן:

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Set the size of the div element that contains the map */
      #map {
        height: 400px; /* The height is 400 pixels */
        width: 100%; /* The width is the width of the web page */
      }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
      // Initialize and add the map
      function initMap() {
        // The location of Oracle Park Stadium
        var oraclePark = { lat: 37.780087547237365, lng: -122.38948437884427 };,
        // The map, initially centered at Mountain View, CA.
        var map = new google.maps.Map(document.getElementById("map"));
        map.setOptions({ center: { lat: 37.424069, lng: -122.0916944 }, zoom: 14 });

        // The marker, now positioned at Oracle Park
        var marker = new google.maps.Marker({ position: oraclePark, map: map });
      }
    </script>
    <!-- Load the API from the specified URL.
      * The async attribute allows the browser to render the page while the API loads.
      * The key parameter will contain your own API key (which is not needed for this tutorial).
      * The callback parameter executes the initMap() function.
    -->
    <script
      defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    ></script>
  </body>
</html>

כדי להוסיף את ספריית JavaScript Journey Sharing, שכוללת את המעקב אחר Fleet:

1. מוסיפים קוד למפעל של אסימון האימות.
2. הפעלת ספק מיקום בפונקציה initMap().
3. הפעלת תצוגת המפה בפונקציה initMap(). התצוגה מכילה את המפה.
4. מעבירים את ההתאמה האישית לפונקציית הקריאה החוזרת כדי לבצע אתחול של תצוגת המפה.
5. מוסיפים את ספריית המיקומים לטוען ה-API.

בדוגמה הבאה אפשר לראות את השינויים שצריך לבצע:

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Set the size of the div element that contains the map */
      #map {
        height: 400px; /* The height is 400 pixels */
        width: 100%; /* The width is the width of the web page */
      }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
      let locationProvider;

      // (1) Authentication Token Fetcher
      function authTokenFetcher(options) {
        // options is a record containing two keys called
        // serviceType and context. The developer should
        // generate the correct SERVER_TOKEN_URL and request
        // based on the values of these fields.
        const response = await fetch(SERVER_TOKEN_URL);
            if (!response.ok) {
              throw new Error(response.statusText);
            }
            const data = await response.json();
            return {
              token: data.Token,
              expiresInSeconds: data.ExpiresInSeconds
            };
      }

      // Initialize and add the map
      function initMap() {
        // (2) Initialize location provider. Use FleetEngineVehicleLocationProvider
        // as appropriate.
        locationProvider = new google.maps.journeySharing.FleetEngineVehicleLocationProvider({
          YOUR_PROVIDER_ID,
          authTokenFetcher,
        });

        // (3) Initialize map view (which contains the map).
        const mapView = new google.maps.journeySharing.JourneySharingMapView({
          element: document.getElementById('map'),
          locationProviders: [locationProvider],
          // any styling options
        });

      mapView.addListener('ready', () => {
        locationProvider.vehicleId = VEHICLE_ID;

          // (4) Add customizations like before.

          // The location of Oracle Park
          var oraclePark = {lat: 37.77995187146094, lng: -122.38957020952795};
          // The map, initially centered at Mountain View, CA.
          var map = mapView.map;
          map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
          // The marker, now positioned at Oracle Park
          var marker = new google.maps.Marker({position: oraclePark, map: map});
        };
      }
    </script>
    <!-- Load the API from the specified URL
      * The async attribute allows the browser to render the page while the API loads
      * The key parameter will contain your own API key (which is not needed for this tutorial)
      * The callback parameter executes the initMap() function
      *
      * (5) Add the journey sharing library to the API loader, which includes Fleet Tracking functionality.
    -->
    <script
      defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing&v=beta"
    ></script>
  </body>
</html>

אם אתם מפעילים כלי רכב עם המזהה שצוין ליד אורקל פארק, הוא יוצג במפה.