تستخدم Google تكنولوجيا الذكاء الاصطناعي لترجمة المحتوى إلى لغتك المفضّلة، وقد تتضمّن بعض الأخطاء.

عرض مجموعة مركبات

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

يتناول هذا المستند الإجراءات التالية التي يمكنك اتّخاذها عند عرض أسطول:

بدء تتبُّع الأسطول
الاستماع إلى الأحداث ومعالجة الأخطاء
إيقاف التتبُّع
تتبُّع مركبة واحدة أثناء عرض أسطول

بدء تتبُّع الأسطول

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

إنشاء مثيل لموفّر خدمة الموقع الجغرافي للمركبات

تتضمّن مكتبة تتبُّع الأسطول في JavaScript موفّر موقع جغرافي يسترجع مركبات متعددة من Fleet Engine.

لإنشاء مثيل له، اتّبِع الخطوات التالية:

استخدِم رقم تعريف المشروع بالإضافة إلى مرجع إلى أداة جلب الرموز المميّزة.
استخدام طلب فلترة المركبات: يتحكّم طلب فلترة المركبات في المركبات التي تعرضها الخريطة. يتم تمرير الفلتر إلى Fleet Engine.
- بالنسبة إلى الخدمات عند الطلب، استخدِم vehicleFilter وراجِع ListVehiclesRequest.filter
- بالنسبة إلى المهام المُجدوَلة، استخدِم deliveryVehicleFilter وراجِع ListDeliveryVehiclesRequest.filter
اضبط حدود عرض المركبة. استخدِم locationRestriction لتحديد المنطقة التي يتم فيها عرض المركبات على الخريطة. ولن يكون موفّر الموقع الجغرافي نشطًا إلا بعد ضبط هذا الإعداد. يمكنك ضبط حدود الموقع الجغرافي إما في الدالة الإنشائية أو بعدها.
بدء عرض الخريطة

توضّح الأمثلة التالية كيفية إنشاء مثيل لمقدّم خدمة الموقع الجغرافي لأسطول المركبات لكل من سيناريوهات المهام عند الطلب والمجدوَلة. توضّح هذه الأمثلة أيضًا كيفية استخدام locationRestriction في الدالة الإنشائية لتفعيل موفّر الموقع الجغرافي.

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

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"',
        });

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

JavaScript

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

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately make the location provider active.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

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

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately make the location provider active.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

لضبط locationRestriction بعد الدالة الإنشائية، أضِف locationProvider.locationRestriction لاحقًا في الرمز البرمجي كما هو موضّح في مثال JavaScript التالي.

   // You can choose to not set locationRestriction in the constructor.
   // In this case, the location provider *DOES NOT START* after this line, because
   // no locationRestriction is set.
   locationProvider = new google.maps.journeySharing.DeliveryFleetLocationProvider({
   ... // not setting locationRestriction here
   });

   // You can then set the locationRestriction *after* the constructor.
   // After this line, the location provider is active.
   locationProvider.locationRestriction = {
     north: 1,
     east: 2,
     south: 0,
     west: 1,
   };

ضبط قيود الموقع الجغرافي باستخدام إطار عرض الخريطة

يمكنك أيضًا ضبط حدود 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;
    }
  });

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

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 provider 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 provider will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

بدء عرض الخريطة

بعد إنشاء موفّر الموقع الجغرافي، عليك إعداد عرض الخريطة بالطريقة نفسها التي تتّبعها عند تتبُّع مركبة واحدة.

بعد تحميل مكتبة "مشاركة الرحلة" في 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.addListener('update', e => {
  // e.vehicles contains data that may be
  // useful to the rest of the UI.
  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);
    }
  }
});

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

JavaScript

locationProvider.addListener('update', e => {
  // e.deliveryVehicles contains data that may be
  // useful to the rest of the UI.
  if (e.deliveryVehicles) {
    for (vehicle of e.deliveryVehicles) {
      console.log(vehicle.remainingDistanceMeters);
    }
  }
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineDeliveryFleetLocationProviderUpdateEvent) => {
  // e.deliveryVehicles contains data that may be
  // useful to the rest of the UI.
  if (e.deliveryVehicles) {
    for (vehicle of e.deliveryVehicles) {
      console.log(vehicle.remainingDistanceMeters);
    }
  }
});

الاستماع إلى الأخطاء

يجب أيضًا الاستماع إلى الأخطاء التي تحدث أثناء تتبُّع مركبة ومعالجتها. تؤدي الأخطاء التي تحدث بشكل غير متزامن من طلب معلومات المركبة إلى ظهور أحداث خطأ.

يوضّح المثال التالي كيفية الاستماع إلى هذه الأحداث حتى تتمكّن من معالجة الأخطاء.

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.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

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

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

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

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

تتبُّع مركبة توصيل أثناء عرض أسطول التوصيل

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

JavaScript

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery 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 delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [
    deliveryFleetLocationProvider,
    deliveryVehicleLocationProvider,
  ],
  // Any other options
});

TypeScript

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery 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 delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [
    deliveryFleetLocationProvider,
    deliveryVehicleLocationProvider,
  ],
  // Any other options
});

استخدام ميزة تخصيص العلامات لتتبُّع مركبة توصيل

لتفعيل موفّر الموقع الجغرافي لمركبة التوصيل من أجل تتبُّع مركبة توصيل عند النقر على علامة الأسطول، اتّبِع الخطوات التالية:

تخصيص علامة وإضافة إجراء عند النقر
إخفاء العلامة لمنع تكرار العلامات

ملاحظة: يعرض مقدّم خدمة الموقع الجغرافي لأسطول التسليم مجموعة من العلامات، واحدة لكل مركبة يتم تتبُّعها. إذا أردت عرض تفاصيل مركبة واحدة عندما ينقر المستخدم على تلك المركبة، يمكنك إنشاء مثيل لمقدّم خدمة الموقع الجغرافي لمركبة التوصيل، وضبط رقم تعريف المركبة ليكون الرقم الذي نقر عليه المستخدم، كما هو موضّح في المثال التالي. ومع ذلك، عند إجراء ذلك، يعرض مقدّم الموقع الجغرافي لمركبة التوصيل أيضًا علامة لهذه المركبة (كما هو مصمّم). لذلك، يمكنك إخفاء إحدى العلامتَين كي لا تظهر علامتان للمركبة نفسها.

تتوفّر أمثلة على هذه الخطوات في الأقسام التالية.

تخصيص علامة وإضافة إجراء عند النقر

JavaScript

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

TypeScript

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params: google.maps.journeySharing.DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

إخفاء العلامة لمنع تكرار العلامات

إخفاء العلامة من موفّر الموقع الجغرافي لمركبة التوصيل لمنع عرض علامتَين للمركبة نفسها:

JavaScript

// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

TypeScript

// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params: deliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

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

تخصيص مظهر خريطة

عرض مجموعة مركبات تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

بدء تتبُّع الأسطول

إنشاء مثيل لموفّر خدمة الموقع الجغرافي للمركبات

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

JavaScript

TypeScript

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

JavaScript

TypeScript

ضبط قيود الموقع الجغرافي باستخدام إطار عرض الخريطة

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

JavaScript

TypeScript

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

JavaScript

TypeScript

بدء عرض الخريطة

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

JavaScript

TypeScript

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

JavaScript

TypeScript

الاستماع إلى الأحداث ومعالجة الأخطاء

الاستماع إلى أحداث التغيير

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

JavaScript

TypeScript

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

JavaScript

TypeScript

الاستماع إلى الأخطاء

JavaScript

TypeScript

إيقاف تتبُّع الأسطول

ضبط حدود موفّر الموقع الجغرافي على قيمة فارغة

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

تتبُّع مركبة توصيل أثناء عرض أسطول التوصيل

JavaScript

TypeScript

استخدام ميزة تخصيص العلامات لتتبُّع مركبة توصيل

تخصيص علامة وإضافة إجراء عند النقر

JavaScript

TypeScript

إخفاء العلامة لمنع تكرار العلامات

JavaScript

TypeScript

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

عرض مجموعة مركبات