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