تتبُّع مركبة

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

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

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

تحميل المكتبة وبدء وضع الخريطة

لعرض عمليات أسطولك على خريطة في صفحة الويب، استخدِم نصًا برمجيًا يستدعي خريطة باستخدام مفتاح واجهة برمجة التطبيقات. يوضّح المثال التالي كيفية إجراء ذلك من HTML:

• مصدر عنوان URL: يُطلِب هذا الإجراء من واجهة برمجة تطبيقات "خرائط Google" خريطة باستخدام مفتاح واجهة برمجة التطبيقات.

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

الرحلات عند الطلب

JavaScriptTypeScript

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

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

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

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

المهام المُجدوَلة

JavaScriptTypeScript

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

          // Optionally, you may specify
          // deliveryVehicleId to immediately start
          // tracking.
          deliveryVehicleId: 'your-delivery-id',
});

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 في الأمثلة التالية.=

الرحلات عند الطلب

JavaScriptTypeScript

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

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

المهام المُجدوَلة

JavaScriptTypeScript

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

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 باستخدام مزوّد خدمة الموقع الجغرافي. تشمل البيانات الوصفية وقت الوصول المقدَّر والمسافة المتبقية قبل موعد استلام المركبة أو تسليمها التالي. تؤدي التغييرات في المعلومات الوصفية إلى بدء حدث تعديل في مقدّم الموقع الجغرافي.

يوضّح المثال التالي كيفية الاستماع إلى أحداث التغيير هذه.

الرحلات عند الطلب

JavaScriptTypeScript

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

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

المهام المُجدوَلة

JavaScriptTypeScript

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

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 في الأمثلة التالية.=

الرحلات عند الطلب

JavaScriptTypeScript

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

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

المهام المُجدوَلة

JavaScriptTypeScript

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

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

إيقاف تتبُّع مركبة

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

إزالة مركبة من مقدّم الموقع الجغرافي

لإيقاف موفِّر الموقع الجغرافي عن تتبُّع مركبة، عليك إزالة رقم تعريف مركبة التسليم من موفِّر الموقع الجغرافي.

الرحلات عند الطلب

JavaScriptTypeScript

locationProvider.vehicleId = '';

locationProvider.vehicleId = '';

المهام المُجدوَلة

JavaScriptTypeScript

locationProvider.deliveryVehicleId = '';

locationProvider.deliveryVehicleId = '';

إزالة مقدّم الموقع الجغرافي من عرض الخريطة

يوضّح المثال التالي كيفية إزالة مقدّم خدمة الموقع الجغرافي من عرض الخريطة.

JavaScriptTypeScript

mapView.removeLocationProvider(locationProvider);

mapView.removeLocationProvider(locationProvider);

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

• عرض أسطول تسليم
• تطبيق نمط على خريطة