يوضّح هذا القسم كيفية استخدام مكتبة تتبُّع الأسطول المستندة إلى JavaScript لتتبُّع مركبة للرحلات عند الطلب أو المهام المُجدوَلة.
لتتبُّع مركبة، اتّبِع الخطوات التالية:
- تحميل المكتبة وإعداد عرض الخريطة
- توفير الموقع الجغرافي للمركبة وعرض الخريطة
- الاستماع إلى الأحداث والتعامل مع الأخطاء
- إيقاف التتبُّع
تحميل المكتبة وتهيئة طريقة عرض الخريطة
لعرض عمليات أسطولك على خريطة في صفحة الويب، استخدِم نصًا برمجيًا يستدعي خريطة باستخدام مفتاح واجهة برمجة التطبيقات. يوضّح المثال التالي كيفية إجراء ذلك من HTML:
مصدر عنوان URL: يطلب من Google Maps API الحصول على خريطة باستخدام مفتاح واجهة برمجة التطبيقات.
المَعلمة
callback
: تنفِّذ الدالةinitMap
بعد أن تعرض واجهة برمجة التطبيقات نتيجة الطلب.المَعلمة
libraries
: يتم تحميل مكتبة "تتبُّع المركبات".السمة
defer
: تتيح للمتصفّح مواصلة عرض بقية صفحتك أثناء تحميل واجهة برمجة التطبيقات.<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
توفير الموقع الجغرافي للمركبة وعرض الخريطة
لبدء تتبُّع مركبة، عليك إنشاء مثيل لمقدّم خدمة الموقع الجغرافي للمركبة وتهيئة عرض الخريطة باستخدام رقم تعريف المركبة كما هو موضّح في الأقسام التالية.
إنشاء مثيل لموفّر الموقع الجغرافي للمركبة
تتضمّن مكتبة تتبُّع الأسطول المستندة إلى JavaScript موفّر مواقع جغرافية لواجهة برمجة التطبيقات Fleet Engine. استخدِم رقم تعريف مشروعك ومرجعًا إلى أداة جلب الرموز المميّزة لإنشاء مثيل لها كما هو موضّح في الأمثلة التالية.
الرحلات عند الطلب
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
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',
});
تهيئة عرض الخريطة
بعد تحميل مكتبة JavaScript الخاصة بميزة "مشاركة الرحلة"، عليك تهيئة عرض الخريطة وإضافته إلى صفحة HTML. يجب أن تحتوي صفحتك على عنصر <div> يتضمّن عرض الخريطة. يُطلق على عنصر <div> الاسم map_canvas في الأمثلة التالية.=
الرحلات عند الطلب
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// 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 want.
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],
});
// 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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
المهام المُجدوَلة
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// 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 want.
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],
});
// 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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
الاستماع إلى الأحداث والتعامل مع الأخطاء
بعد بدء تتبُّع مركبة، عليك تعديل مستوى تقدّمها على الخريطة والتعامل مع الأخطاء أثناء تنقّلها على طول مسارها.
الاستماع إلى أحداث المركبات
لتتبُّع تقدّم مركبة في الرحلات عند الطلب أو المهام المُجدوَلة، عليك الاستماع إلى أحداث التغيير.
يمكنك استرداد البيانات الوصفية من الكائن vehicle
أو deliveryVehicle
باستخدام موفّر الموقع الجغرافي. تتضمّن المعلومات الوصفية الوقت المقدّر للوصول والمسافة المتبقية
قبل عملية الاستلام أو التسليم التالية للمركبة. تؤدي التغييرات في المعلومات الوصفية إلى تشغيل حدث تعديل في مقدّم خدمة الموقع الجغرافي.
يوضّح المثال التالي كيفية الاستماع إلى أحداث التغيير هذه.
الرحلات عند الطلب
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('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 الخاصة بميزة "مشاركة الرحلة"، عليك تهيئة عرض الخريطة وإضافته إلى صفحة HTML. يجب أن تحتوي صفحتك على عنصر <div> يتضمّن عرض الخريطة. يُطلق على عنصر <div> الاسم map_canvas في الأمثلة التالية.=
الرحلات عند الطلب
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// 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 want.
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],
});
// 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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
المهام المُجدوَلة
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// 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 want.
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],
});
// 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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
إيقاف تتبُّع مركبة
لإيقاف تتبُّع مركبة، عليك إزالتها من موفّر خدمة تحديد الموقع الجغرافي وإزالة موفّر خدمة تحديد الموقع الجغرافي من عرض الخريطة كما هو موضّح في الأقسام التالية. تنطبق الأمثلة الواردة هنا على كل من الرحلات عند الطلب وتنفيذ المهام المجدوَلة.
إزالة مركبة من مقدّم خدمة تحديد الموقع الجغرافي
لإيقاف تتبُّع موفِّر خدمة الموقع الجغرافي لمركبة، عليك إزالة رقم تعريف مركبة التوصيل من موفِّر خدمة الموقع الجغرافي.
الرحلات عند الطلب
JavaScript
locationProvider.vehicleId = '';
TypeScript
locationProvider.vehicleId = '';
المهام المُجدوَلة
JavaScript
locationProvider.deliveryVehicleId = '';
TypeScript
locationProvider.deliveryVehicleId = '';
إزالة مقدّم خدمة الموقع الجغرافي من عرض الخريطة
يوضّح المثال التالي كيفية إزالة مقدّم خدمة تحديد الموقع الجغرافي من عرض الخريطة.
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);