تتبُّع مركبة

يوضّح هذا القسم كيفية استخدام مكتبة JavaScript لتتبُّع أسطول المركبات لتتبُّع مركبة للرحلات عند الطلب أو المهام المُجدوَلة.

لتتبُّع مركبة، عليك اتّباع الخطوات التالية:

  1. تحميل المكتبة وتهيئة عرض الخريطة
  2. توفير موقع المركبة وعرض الخريطة
  3. الاستماع إلى الأحداث والتعامل مع الأخطاء
  4. إيقاف التتبُّع

تحميل المكتبة وتهيئة عرض الخريطة

لعرض عمليات أسطولك على خريطة في صفحة الويب، استخدِم نصًا برمجيًا يستدعي خريطة باستخدام مفتاح واجهة برمجة التطبيقات. يوضّح المثال التالي كيفية إجراء ذلك من 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 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

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

الخطوات التالية