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

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

يناقش هذا المستند الأشياء التالية التي يمكنك القيام بها عند عرض مجموعة الأجهزة:

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

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

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

إنشاء مثيل لموقع أسطول المركبات

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

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

1. استخدِم رقم تعريف المشروع بالإضافة إلى مرجع إلى أداة استرجاع الرموز المميّزة.

2. استخدام طلب بحث فلتر المركبات: يتحكّم طلب البحث عن فلتر المركبات في المركبات التي تعرِضها الخريطة. يتم تمرير الفلتر إلى Fleet Engine.

   • للحصول على الخدمات المتوفرة عند الطلب، يمكنك استخدام vehicleFilter ومراجعة ListVehiclesRequest.filter.
   • بالنسبة إلى المهام المُجدوَلة، استخدِم "deliveryVehicleFilter" وراجِعها. ListDeliveryVehiclesRequest.filter

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

4. إعداد عرض الخريطة

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

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

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

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

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

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

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 لتتطابق مع المنطقة التي تظهر حاليًا في عرض الخريطة.

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

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

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

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

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

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> يحتوي على عرض الخريطة. العنصر &lt;div&gt; باسم map_canvas في الأمثلة التالية.

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

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

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

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

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

بعد البدء في متابعة مجموعة الأجهزة، عليك معرفة التغييرات التي تطرأ على الفعالية. والتعامل مع أي أخطاء قد تظهر كما هو موضح في الأقسام التالية.

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

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

لمعرفة التفاصيل، يُرجى الاطّلاع على ما يلي:

• مرجع خيارات المركبات للرحلات عند الطلب
• مرجع خيارات المركبات للمهام المُجدوَلة

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

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

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

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

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

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

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

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

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

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

locationProvider.addListener('error', e => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

التوقف عن تتبُّع أسطول المركبات

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

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

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

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

locationProvider.locationRestriction = null;

locationProvider.locationRestriction = null;

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

locationProvider.locationRestriction = null;

locationProvider.locationRestriction = null;

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

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

mapView.removeLocationProvider(locationProvider);

mapView.removeLocationProvider(locationProvider);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• منح الخريطة نمطًا