تتبُّع مركبة

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

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

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

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

• عرض مجموعة مركبات التوصيل
• تصميم خريطة