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

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

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

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

רכיבים

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

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

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

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

ספקי מיקום

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

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

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

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

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

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

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

רכבים

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

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

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

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

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

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

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

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

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

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

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

{
  "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 מבקשת אסימון באמצעות האימות מאחזר האסימונים כשמתקיים אחד מהתנאים הבאים:

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

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

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

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

מחרוזת 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

בדוגמה הבאה אפשר לראות איך לטעון את ספריית Journey Sharing ב-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>

מעקב אחר רכב

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

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

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

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

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

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

הספרייה למעקב אחר Fleet JavaScript מגדירה מראש ספק מיקום שולפת כמה כלי רכב מה-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;
    }
  });

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

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