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

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

תחילת העבודה עם SDK לצרכן ב-JavaScript

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

רכיבים

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

תצוגת המפה 'התקדמות נסיעה והזמנה'

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

הספק של מיקום הנסיעה

JavaScript SDK כולל מיקום נסיעה ספק שמזינים פרטי מיקום של אובייקטים במעקב מפת ההתקדמות של הנסיעה וההזמנה.

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

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

אובייקטים של מיקום במעקב

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

מיקום נקודת המוצא

מיקום המוצא הוא המיקום שבו מתחיל הנסיעה. הוא מסמן את מיקום האיסוף.

מיקום היעד

מיקום היעד הוא המיקום שבו הנסיעה מסתיימת. היא מסמן את מיקום המסירה.

המיקום של ציון הדרך

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

מיקום הרכב

מיקום הרכב הוא המיקום של הרכב במעקב. אם תרצו, כוללים מסלול לרכב.

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

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

אפשרויות עיצוב

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

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

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

רכבים

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

כל שאר סמני המיקום

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

תחילת העבודה עם JavaScript SDK

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript

async 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.jwt,
    expiresInSeconds: data.expirationTimestamp - Date.now(),
  };
}

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

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

טעינת מפה מ-HTML

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

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

מעקב אחרי נסיעה

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

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

JavaScript SDK מגדיר מראש ספק מיקום ל-Fleet Engine Rideshare API. משתמשים במזהה הפרויקט וב הפניה ליצרן האסימונים שלכם כדי ליצור אותו.

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineTripLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

          // Optionally, you may specify a trip ID to
          // immediately start tracking.
          tripId: 'your-trip-id',
});

TypeScript

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

          // Optionally, you may specify a trip ID to
          // immediately start tracking.
          tripId: 'your-trip-id',
});

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

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

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

JavaScript

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

// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.tripId = 'your-trip-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({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

TypeScript

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

// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
locationProvider.tripId = 'your-trip-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({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

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

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

JavaScript

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

TypeScript

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

טיפול בשגיאות

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

JavaScript

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

TypeScript

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

הערה: חשוב להקפיד לכלול קריאות לספרייה ב-try...catch בלוקים לטיפול בשגיאות בלתי צפויות.

הפסקת מעקב

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

JavaScript

locationProvider.tripId = '';

TypeScript

locationProvider.tripId = '';

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

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

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

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

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

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

JavaScript

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

TypeScript

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

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

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

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

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

ה-JavaScript SDK מספק את הפרמטרים הבאים להתאמה אישית ב-FleetEngineTripLocationProviderOptions:

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

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

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

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

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

JavaScript

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

TypeScript

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
};

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

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

JavaScript

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

TypeScript

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

שימוש בהתאמה אישית של קו פוליגוני

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

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

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

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

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.trip.remainingWaypoints[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: TripPolylineCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints[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 =
  FleetEngineTripLocationProvider.
      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) => {
    FleetEngineTripLocationProvider.
        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 =
  FleetEngineTripLocationProvider.
      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: TripPolylineCustomizationFunctionParams) => {
    FleetEngineTripLocationProvider.
        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});

locationProvider.addListener('update', e => {
  const stopsCount = e.trip.remainingWaypoints.length;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

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

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
  const stopsCount = e.trip.remainingWaypoints.length;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

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

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

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

לדוגמה, נניח שיש לך דף אינטרנט עם פרמטר 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 Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // The map, centered at Uluru
  var map = new google.maps.Map(document.getElementById('map'));
  map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

  // The marker, positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, 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 SDK:

צריך להוסיף קוד למפעל של אסימון האימות.
מפעילים ספק מיקום בפונקציה 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
async 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.
  locationProvider = new google.maps.journeySharing.FleetEngineTripLocationProvider({
    projectId: "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
  });

  locationProvider.tripId = TRIP_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // The map, centered at Uluru
    var map = mapView.map;
    map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
    // The marker, positioned at Uluru
    var marker = new google.maps.Marker({position: uluru, 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 SDK to the API loader.
    -->
    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
    </script>
  </body>
</html>

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

תחילת העבודה עם SDK לצרכן ב-JavaScript

רכיבים

תצוגת המפה 'התקדמות נסיעה והזמנה'

הספק של מיקום הנסיעה

אובייקטים של מיקום במעקב

מיקום נקודת המוצא

מיקום היעד

המיקום של ציון הדרך

מיקום הרכב

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

אפשרויות עיצוב

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

רכבים

כל שאר סמני המיקום

תחילת העבודה עם JavaScript SDK

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

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

JavaScript

TypeScript

טעינת מפה מ-HTML

מעקב אחרי נסיעה

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

טיפול בשגיאות

JavaScript

TypeScript

הפסקת מעקב

JavaScript

TypeScript

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

JavaScript

TypeScript

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

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

שימוש בהתאמה אישית של קו פוליגוני

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

השבתת התאמה אוטומטית

JavaScript

TypeScript

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

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

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

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

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

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

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