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

דף זה תורגם על ידי Cloud Translation API.

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

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

רכיבים

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

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

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

דוגמה לתצוגת מפה
של מעקב צי

ספקי מיקום

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

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

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

ספק מיקום כלל המכשירים בארגון

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

שליטה בהרשאות הגישה של מיקומים שבמעקב

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

רכבים

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

סמני מיקום של ציוני דרך

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

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

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

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

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

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

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

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

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

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "superuser@yourgcpproject.iam.gserviceaccount.com",
  "sub": "superuser@yourgcpproject.iam.gserviceaccount.com",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
    "tripid": "*",
    "vehicleid": "*",
  }
}

יצירת שליפת אסימון אימות

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

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

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

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

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

מחרוזת 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 Journey Sharing מכתובת 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 מגדירה מראש ספק מיקום ל-On Demand 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',
});

אתחול תצוגת המפה

אחרי שטוענים את ספריית Journey Sharing ב-JavaScript, מאתחלים את תצוגת המפה ומוסיפים אותה לדף ה-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' כדי לראות צי רכבים. לפני שמריצים את הקוד, חשוב לטעון את הספרייה מפונקציית הקריאה החוזרת שמצוינת בתג הסקריפט.

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

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

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

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

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

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

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

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

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

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

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

הספרייה Fleet Tracking מספקת את הפרמטרים הבאים להתאמה אישית:

שינוי הסגנון של הסמנים באמצעות `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 בגוון עמוק יותר או להפוך אותו לעבה יותר כשהרכב נע לאט יותר. אפשר אפילו להצטרף כנגד מקורות מחוץ ל-Fleet 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, שכוללת את 'מעקב אחר ציים':

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

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

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

רכיבים

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

ספקי מיקום

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

ספק מיקום כלל המכשירים בארגון

שליטה בהרשאות הגישה של מיקומים שבמעקב

רכבים

סמני מיקום של ציוני דרך

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

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

יצירת שליפת אסימון אימות

JavaScript

TypeScript

טעינת מפה מ-HTML

מעקב אחר רכב

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

JavaScript

TypeScript

אתחול תצוגת המפה

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

הפסקת מעקב

JavaScript

TypeScript

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

JavaScript

TypeScript

צפייה בכלל כלי הרכב

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

הפסקת מעקב

JavaScript

TypeScript

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

JavaScript

TypeScript

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

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

שינוי העיצוב של Polyline אובייקטים באמצעות PolylineOptions

JavaScript

TypeScript

שינוי העיצוב של Polyline אובייקטים באמצעות פונקציות של התאמה אישית

JavaScript

TypeScript

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

JavaScript

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

שינוי העיצוב של `Polyline` אובייקטים באמצעות `PolylineOptions`

שינוי העיצוב של `Polyline` אובייקטים באמצעות פונקציות של התאמה אישית

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

עיבוד של אובייקטים מסוג `Polyline` שמתחשבים בתעבורת נתונים

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