הספרייה למעקב אחר ציים של JavaScript מאפשרת להציג באופן חזותי את המיקומים
של כלי הרכב בצים שלהם כמעט בזמן אמת. הספרייה משתמשת
ב-Deliveries API
כדי לאפשר תצוגה חזותית של רכבי משלוח וגם משימות. לייק
ספריית המעקב אחר משלוחים ב-JavaScript,
הוא מכיל רכיב מפה של JavaScript שמחליף את 'טיפ'
לישות google.maps.Map
רגילה ורכיבי נתונים לקישור
עם Fleet Engine.
רכיבים
ספריית המעקב אחר Fleet JavaScript מספקת רכיבים להמחשה חזותית של כלי רכב למשלוחים או עצירות ביניים, וכן פידים של נתונים גולמיים עבור זמן ההגעה המשוער או זמן ההגעה המשוער המרחק עד למשלוח.
תצוגת מפה של מעקב אחר כלל המכשירים בארגון
רכיב תצוגת המפה של מעקב Fleet מציג באופן חזותי המיקום של כלי רכב ומשימות. אם המסלול לרכב ידוע, רכיב תצוגת המפה יוצר אנימציה של הרכב כשהוא נע לאורך הנתיב הצפוי שלו.
ספקי מיקום
ספקי מיקום עובדים עם מידע שמאוחסן ב-Fleet Engine כדי לשלוח מיקום אחר אובייקטים שנמצאים במעקב במפת שיתוף התהליך.
ספק מיקום הרכב למשלוח
ספק המיקום של רכב המשלוחים מציג נתוני מיקום. יש בו מידע על מיקום הרכב וגם משימות שהושלמו על ידי רכב המסירה.
ספק המיקום של צי המשלוחים
ספק המיקום של צי המשלוחים מציג כמה כלי רכב מקום מידע. אפשר לסנן לפי רכבים או מיקומים ספציפיים, או שאפשר להציג לכל הצי.
שליטה בהרשאות הגישה של מיקומים שבמעקב
בקטע הזה מתוארים כללי החשיפה של אובייקטים של מיקום במעקב במפה עבור ספק המיקום המוגדר מראש של Fleet Engine. מותאם אישית או נגזר ספקי מיקום עשויים לשנות את כללי החשיפה.
רכבי משלוח
אפשר לראות רכב משלוח ברגע שהוא נוצר ב-Fleet Engine, והוא גלוי לאורך המסלול, ללא קשר למשימות שלו.
סמני מיקום של משימות
תחנות מתוכננות של רכבים מוצגות במפה כסמני עצירה של רכבים. סמנים למשימות שבוצעו, מוצגות בסגנון שונה מהסגנון של כלי הרכב עצירות מתוכננות.
המיקום של תוצאות המשימה מוצג עם הסמנים של תוצאות המשימה. משימות עם תוצאה חשובה מוצגות עם סמני משימה שהצליחו, בזמן שכל שאר המשימות מוצגות עם סמני משימה שנכשלים.
תחילת העבודה עם ספריית המעקב של Fleet ב-JavaScript
לפני השימוש בספריית המעקב של Fleet JavaScript, יש לוודא להכיר את Fleet Engine באמצעות קבלת מפתח API. לאחר מכן יוצרים מזהה משימה והצהרת בעלות על מזהה הרכב למשלוח.
יצירת מזהה משימה והצהרה על מזהה הרכב למשלוח
כדי לעקוב אחרי רכבי משלוחים באמצעות ספק המיקום של שירותי המשלוחים, ליצור אסימון רשת מבוסס JSON (JWT) עם מזהה משימה והצהרה על מזהה הרכב למשלוח.
כדי ליצור את המטען הייעודי (payload) של JWT, צריך להוסיף הצהרה נוספת בקטע ההרשאה עם המפתחות taskid ו-deliveryvehicleid, ומגדירים את הערך של כל מקש *. יש ליצור את האסימון באמצעות Fleet Engine תפקיד IAM של סופר-משתמש ב-Cloud. חשוב לזכור שהפעולה הזו נותנת גישה רחבה כדי ליצור, לקרוא ולשנות ישויות של Fleet Engine, וצריך לשתף אותן רק עם משתמשים מהימנים.
בדוגמה הבאה אפשר לראות איך ליצור אסימון למעקב לפי רכב ומשימה:
{
"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": {
"taskid": "*",
"deliveryvehicleid": "*",
}
}
יצירת שליפת אסימון אימות
אפשר ליצור מאחזרת אסימון אימות כדי לאחזר אסימון שנוצר עם ההצהרות המתאימות על השרתים שלכם באמצעות שירות אישור החשבון של הפרויקט. חשוב להנפיק אסימונים בלבד בשרתים שלכם ואף פעם לא תשתפו את האישורים עם לקוחות. אחרת, אתם עלולים לסכן את אבטחת המערכת שלכם.
המאחזר חייב להחזיר מבנה נתונים שכולל שני שדות, עטוף בהבטחה:
- מחרוזת
token
. - מספר
expiresInSeconds
. התוקף של אסימון יפוג בתוך פרק הזמן הזה לאחר אחזור.
ספריית המעקב של Fleet JavaScript מבקשת אסימון דרך האימות מאחזר האסימונים כשמתקיים אחד מהתנאים הבאים:
- אין לו אסימון חוקי, למשל כשהוא לא הפעיל את המאחזר ב- טעינת דף חדשה, או כשהמאחזר לא חזר עם אסימון.
- פג תוקפו של האסימון שאוחזר בעבר.
- האסימון שהוא אוחזר קודם לכן עומד לפוג תוך דקה.
אחרת, הספרייה תשתמש באסימון החוקי הקודם, שעדיין בתוקף, לא לקרוא ל-Fetcher.
הדוגמה הבאה מציגה איך ליצור כלי לשליפה של אסימון אימות:
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/delivery_driver/DELIVERY_VEHICLE_ID
- https://
SERVER_URL
/token/delivery_consumer/TRACKING_ID
- https://
SERVER_URL
/token/fleet_reader
- https://
טעינת מפה מ-HTML
בדוגמה הבאה אפשר לראות איך לטעון את תהליך שיתוף התהליך ב-JavaScript
מכתובת אתר ספציפית. הפרמטר 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 לעקוב אחרי רכב משלוח. צריך לוודא לטעון את הספרייה מפונקציית הקריאה החוזרת שצוינה בתג הסקריפט לפני הרצת הקוד.
יצירת אובייקטים של ספק מיקום של רכב למשלוחים
הספרייה למעקב אחר Fleet JavaScript מגדירה מראש ספק מיקום ל-Fleet Engine Deliveries. משתמשים במזהה הפרויקט וב הפניה ליצרן האסימונים שלכם כדי ליצור אותו.
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// deliveryVehicleId to immediately start
// tracking.
deliveryVehicleId: 'your-delivery-id',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// deliveryVehicleId to immediately start
// tracking.
deliveryVehicleId: 'your-delivery-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 delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-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.
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-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);
האזנה לאירועי שינויים
אפשר לאחזר מטא-מידע על משימה מהאובייקט deliveryVehicle
באמצעות ספק המיקום. המטא מידע כולל את זמן ההגעה המשוער
המרחק שנותר לפני האיסוף או ההורדה הבאים של הרכב. סיכום השינויים
למטא-מידע יגרום להפעלה של אירוע update. הדוגמה הבאה
מראה איך להאזין לאירועי השינוי האלה.
JavaScript
locationProvider.addListener('update', e => {
// e.deliveryVehicle contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicle) {
console.log(e.deliveryVehicle.remainingDuration);
}
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
// e.deliveryVehicle contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicle) {
console.log(e.deliveryVehicle.remainingDuration);
}
});
האזנה לשגיאות
שגיאות שנובעות באופן אסינכרוני מבקשה להפעלה של פרטי רכב למשלוח ואירועי שגיאה. בדוגמה הבאה אפשר לראות איך להאזין לאירועים האלה כדי לטפל בשגיאות.
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.deliveryVehicleId = '';
TypeScript
locationProvider.deliveryVehicleId = '';
הסרת ספק המיקום מתצוגת המפה
בדוגמה הבאה ניתן לראות איך להסיר ספק מיקום מתצוגת המפה.
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);
הצגת צי משלוחים
בקטע הזה מוסבר איך להשתמש בספריית תהליך השיתוף ב-JavaScript כדי לראות צי משלוחים. צריך לוודא לטעון את הספרייה מפונקציית הקריאה החוזרת שצוינה בתג הסקריפט לפני הרצת הקוד.
יצירת אובייקט של ספק מיקום של צי משלוחים
הספרייה למעקב אחר Fleet JavaScript מגדירה מראש ספק מיקום שמאחזרת כמה כלי רכב FleetEngine Deliveries API. שימוש ב של פרויקט וגם הפניה למאחזר האסימון שלכם כדי ליצור אותו.
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which delivery 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 delivery vehicles are retrieved.
deliveryVehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which delivery 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 delivery vehicles are retrieved.
deliveryVehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
deliveryVehicleFilter
מציין שאילתה שמשמשת לסינון כלי רכב שמוצגים ב-
את המפה. המסנן הזה מועבר ישירות אל Fleet Engine. צפייה
ListDeliveryVehiclesRequest.filter
כדי לראות את הפורמטים הנתמכים.
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;
}
});
האזנה לאירועי שינויים
אפשר לאחזר מטא-מידע על הצי מ-deliveryVehicles
באמצעות ספק המיקום. המטא-נתונים כוללים נתוני רכב
מאפיינים כמו מצב ניווט, מרחק נותר ומאפיינים מותאמים אישית;
לראות
חומרי עזר
אפשר לקבל פרטים נוספים. שינוי במטא-מידע יגרום להפעלה של אירוע update.
הדוגמה הבאה מראה איך להאזין לאירועי השינוי האלה.
JavaScript
locationProvider.addListener('update', e => {
// e.deliveryVehicles contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicles) {
for (vehicle of e.deliveryVehicles) {
console.log(vehicle.remainingDistanceMeters);
}
}
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineDeliveryFleetLocationProviderUpdateEvent) => {
// e.deliveryVehicles contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicles) {
for (vehicle of e.deliveryVehicles) {
console.log(vehicle.remainingDistanceMeters);
}
}
});
האזנה לשגיאות
שגיאות שנובעות באופן אסינכרוני מבקשה למידע על כלל המכשירים בארגון תפעיל אירועי שגיאה. כדי לראות דוגמאות שמראות איך להאזין לאירועים האלה, אפשר לעיין כדי האזנה לשגיאות.
הפסקת מעקב
כדי למנוע מספק המיקום לעקוב אחר צי המשלוחים, מגדירים את הגבולות של ספק המיקום לערך null.
JavaScript
locationProvider.locationRestriction = null;
TypeScript
locationProvider.locationRestriction = null;
הסרת ספק המיקום מתצוגת המפה
בדוגמה הבאה ניתן לראות איך להסיר ספק מיקום מתצוגת המפה.
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);
מעקב אחר רכב משלוח תוך כדי צפייה בצי משלוחים
כשמציגים צי, אפשר להציג את המסלול והמשימות העתידיות בשביל ספציפי רכב מסירה. לשם כך, יוצרים מיקום של צי המשלוחים ספק וספק שירותי משלוחים של רכבים, ולהוסיף את שניהם תצוגת מפה:
JavaScript
deliveryFleetLocationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which delivery 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 delivery vehicles are retrieved.
deliveryVehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
deliveryVehicleLocationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher
});
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [
deliveryFleetLocationProvider,
deliveryVehicleLocationProvider,
],
// Any other options
});
TypeScript
deliveryFleetLocationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which delivery 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 delivery vehicles are retrieved.
deliveryVehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
deliveryVehicleLocationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher
});
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [
deliveryFleetLocationProvider,
deliveryVehicleLocationProvider,
],
// Any other options
});
ספק המיקום של צי המשלוחים מתחיל להציג רכבי משלוחים ב: את המפה. שימוש בהתאמה אישית של סמנים כדי להפעיל את מיקום הרכב למשלוח ספק למעקב אחר רכב משלוח כשמשתמש לוחץ על סמן הצי שלו:
JavaScript
// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// params.vehicle.name follows the format
// "providers/{provider}/deliveryVehicles/{vehicleId}".
// Only the vehicleId portion is used for the delivery vehicle
// location provider.
deliveryVehicleLocationProvider.deliveryVehicleId =
params.vehicle.name.split('/').pop();
});
}
};
TypeScript
// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
(params: google.maps.journeySharing.DeliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// params.vehicle.name follows the format
// "providers/{provider}/deliveryVehicles/{vehicleId}".
// Only the vehicleId portion is used for the delivery vehicle
// location provider.
deliveryVehicleLocationProvider.deliveryVehicleId =
params.vehicle.name.split('/').pop();
});
}
};
כדי למנוע רינדור, יש להסתיר את הסמן מספק המיקום של רכב המסירה שני סמנים לאותו כלי רכב:
JavaScript
// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.setVisible(false);
}
};
TypeScript
// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
(params: deliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.setVisible(false);
}
};
התאמה אישית של העיצוב והסגנון של המפה הבסיסית
כדי להתאים אישית את העיצוב והסגנון של רכיב המפות, לעצב את המפה באמצעות כלים מבוססי-ענן או על ידי הגדרת אפשרויות ישירות בקוד.
שימוש בעיצוב מפות מבוסס-ענן
עיצוב מפות מבוסס-ענן
מאפשר ליצור ולערוך סגנונות מפה לכל אחת מהאפליקציות שלך שמשתמשות במפות 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)
בסמן.
עם זאת, מסיבות שקשורות לביצועים, מומלץ לסנן באמצעות
סינון בספק המיקום, למשל
FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter
עם זאת, כשאתם זקוקים לפונקציית סינון נוספת, תוכלו להחיל
סינון באמצעות פונקציית ההתאמה האישית.
הספרייה Fleet Tracking מספקת את הפרמטרים הבאים להתאמה אישית:
שינוי הסגנון של הסמנים באמצעות MarkerOptions
הדוגמה הבאה מראה איך להגדיר את העיצוב של סמן הרכב עם
אובייקט MarkerOptions
. צריך לפעול לפי הדפוס הזה כדי להתאים אישית את העיצוב של
סמן באמצעות כל אחד מהפרמטרים להתאמה אישית של סמנים המפורטים למעלה.
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
שינוי העיצוב של הסמנים באמצעות פונקציות של התאמה אישית
בדוגמה הבאה אפשר לראות איך להגדיר את העיצוב של סמן הרכב. הוספה למעקב את התבנית הזאת כדי להתאים אישית את העיצוב של כל סמן באמצעות אחד מהסמנים הפרמטרים להתאמה אישית שצוינו למעלה.
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
params.marker.setLabel(`${stopsLeft}`);
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
params.marker.setLabel(`${stopsLeft}`);
};
הוספת טיפול בקליקים לסמנים
הדוגמה הבאה מראה איך להוסיף טיפול בקליקים לסמן של רכב. יש לפעול לפי הדפוס הזה כדי להוסיף טיפול בקליקים לכל סמן באמצעות אחד מהסמנים האלה הפרמטרים להתאמה אישית שצוינו למעלה.
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
סינון של הסמנים הגלויים
בדוגמה הבאה מוסבר איך לסנן את הסמנים של הרכבים שמוצגים. יש לפעול לפי הדפוס הזה כדי לסנן סמנים באמצעות כל אחת מההתאמה האישית של הסמנים. שמפורטים למעלה.
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};
שימוש בהתאמה אישית של קווים פוליגוניים כשעוקבים אחרי רכב משלוח
בעזרת ספריית המעקב של Fleet ב-JavaScript, אפשר גם להתאים אישית את המראה
התחושה של המסלול של כלי הרכב במפה. הספרייה יוצרת
google.maps.Polyline
לכל צמד של קואורדינטה במצב פעיל או שנותר ברכב
path.
ניתן לעצב את האובייקטים Polyline
על ידי ציון התאמות אישיות של קווים פוליגוניים.
לאחר מכן מחילה את ההתאמות האישיות האלה בשני מצבים: לפני ההוספה
של האובייקטים במפה, וכשהנתונים שבהם נעשה שימוש באובייקטים השתנו.
בדומה להתאמה אישית של סמנים, ניתן לציין קבוצה של
PolylineOptions
יחול על כל האובייקטים Polyline
התואמים כשהם
נוצרו או עודכנו.
באותו אופן, אפשר לציין פונקציית התאמה אישית. פונקציות של התאמה אישית
מאפשרת עיצוב אינדיבידואלי של האובייקטים על סמך נתונים שנשלחים על ידי Fleet Engine.
הפונקציה יכולה לשנות את העיצוב של כל אובייקט בהתאם לרכב הנוכחי
מדינה; לדוגמה, צביעת האובייקט Polyline
בגוון עמוק יותר או
הוא עבה יותר כשהרכב נע לאט יותר. אפשר אפילו להצטרף מ-
מקורות מחוץ ל-Fleet Engine ומעצבים את האובייקט Polyline
לפי
מידע.
ניתן לציין את ההתאמות האישיות באמצעות הפרמטרים שסופקו ב
FleetEngineDeliveryVehicleLocationProviderOptions
אפשר להגדיר התאמה אישית למצבי נתיב שונים ברכב
מסע – כבר נסעתם, נסעתי באופן פעיל או טרם נסעתי.
הם:
takenPolylineCustomization
, לנתיב שכבר עבר בו;activePolylineCustomization
, לנתיב נסיעה פעיל;remainingPolylineCustomization
, לנתיב שעוד לא עבר.
שינוי העיצוב של Polyline
אובייקטים באמצעות PolylineOptions
הדוגמה הבאה מראה איך להגדיר את הסגנון של אובייקט Polyline
עם
PolylineOptions
.
צריך לפעול לפי הדפוס הזה כדי להתאים אישית את העיצוב של כל אובייקט Polyline
באמצעות
מההתאמות האישיות של קו פוליגוני שצוינו קודם.
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
שינוי העיצוב של Polyline
אובייקטים באמצעות פונקציות של התאמה אישית
בדוגמה הבאה אפשר לראות איך להגדיר את הסגנון של קו מרובה נקודות פעיל
באמצעות פונקציית התאמה אישית. צריך לפעול לפי הדפוס הזה כדי להתאים אישית
עיצוב של כל אובייקט Polyline
באמצעות התאמה אישית של קווים פוליגוניים
שתוארו קודם לכן.
JavaScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.deliveryVehicle.remainingDistanceMeters;
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: DeliveryVehiclePolylineCustomizationFunctionParams) => {
const distance = params.deliveryVehicle.remainingDistanceMeters;
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};
הצגת InfoWindow
לסימון רכב או מיקום
אפשר להשתמש ב-InfoWindow
כדי להציג מידע נוסף על רכב או על סמן מיקום.
בדוגמה הבאה אפשר לראות איך ליצור InfoWindow
ולצרף אותו.
לסמן של הרכב.
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
if (e.deliveryVehicle) {
const distance =
e.deliveryVehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next task.`);
// 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 delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
if (e.deliveryVehicle) {
const distance =
e.deliveryVehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next task.`);
// 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 Uluru
var uluru = {lat: -25.344, lng: 131.036};
// 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 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, שכוללת את 'מעקב אחר ציים':
- צריך להוסיף קוד למפעל של אסימון האימות.
- מפעילים ספק מיקום בפונקציה
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 FleetEngineDeliveryVehicleLocationProvider
// as appropriate.
locationProvider = new google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProvider({
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.deliveryVehicleId = DELIVERY_VEHICLE_ID;
// (4) Add customizations like before.
// The location of Uluru
var uluru = {lat: -25.344, lng: 131.036};
// 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 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 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">
</script>
</body>
</html>
אם אתם מפעילים רכב משלוחים עם המזהה שצוין ליד אולורו, הוא יעובד במפה.