تخصيص الخطوط المتعددة للمسار

يتناول هذا المستند كيفية تخصيص مظهر المسارات للمركبات التي يتم تتبُّعها على الخريطة. يتم رسم المسارات على الخريطة في خطوط متعددة الأضلاع. بالنسبة إلى كل زوج من الإحداثيات في المسار النشط أو المتبقي للمركبة، تنشئ المكتبة عنصر google.maps.Polyline. يمكنك تصميم عناصر Polyline من خلال تحديد تخصيصات للخطوط المتعددة تطبّقها المكتبة في حالتين:

• قبل إضافة الكائنات إلى الخريطة
• عندما تتغير البيانات المستخدَمة للعناصر

تنسيق الخطوط المتعددة

كما هو الحال مع تخصيص العلامات، يمكنك تصميم خطوط مسارات متعددة الأضلاع بطرق مختلفة:

1. تنسيق خطوط متعددة الأضلاع لمسار الأسلوب حسب النوع: استخدِم PolylineOptions للتطبيق على جميع عناصر Polyline المطابقة عند إنشائها أو تعديلها. للاطّلاع على مثال، يُرجى الرجوع إلى تحديد نمط الخطوط المتعددة حسب النوع.

2. تحديد نمط خطوط متعدّدة الأضلاع لمسار استنادًا إلى البيانات: حدِّد دالة تخصيص استنادًا إلى البيانات من خدمة تتبُّع الأسطول أو من مصادر خارجية:

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

   • المصادر الخارجية: يمكنك دمج بيانات تتبُّع الأسطول مع بيانات من مصادر خارج Fleet Engine وتصميم العنصر Polyline استنادًا إلى هذه المعلومات.

   للاطّلاع على مثال، راجِع تنسيق الخطوط المتعددة استنادًا إلى البيانات.

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

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

خيارات تخصيص الخطوط المتعددة

تتوفّر خيارات التخصيص التالية في كل من FleetEngineVehicleLocationProviderOptions و FleetEngineDeliveryVehicleLocationProviderOptions. يمكنك ضبط تخصيصات لحالات المسار المختلفة أثناء رحلة المركبة:

• المسار الذي تمّت فيه الرحلة: استخدِم المرجع takenPolylineCustomization - الرحلات عند الطلب، المهام المجدوَلة.

• مسار التنقّل النشط: استخدِم المرجع activePolylineCustomization - الرحلات عند الطلب، المهام المجدوَلة.

• المسار الذي لم يتم السفر فيه بعد: استخدِم المرجع remainingPolylineCustomization - الرحلات عند الطلب، المهام المجدوَلة.

تنسيق خطوط المسار المتعددة حسب النوع

لتصميم خطوط متعددة الأضلاع خاصة بالمسارات حسب النوع، غيِّر تصميم عناصر Polyline باستخدام PolylineOptions.

يوضّح المثال التالي كيفية ضبط نمط Polyline باستخدام PolylineOptions. اتّبِع هذا النمط لتخصيص تصميم أي عنصر Polyline باستخدام أي من خيارات تخصيص خطوط المسار المتعددة المدرَجة في خيارات تخصيص خطوط المسار المتعددة في هذا الدليل.

مثال على الرحلات عند الطلب أو المهام المُجدوَلة

JavaScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

TypeScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

تنسيق خطوط مسارات متعدّدة باستخدام البيانات

لتصميم خطوط متعددة الأضلاع خاصة بالمسارات باستخدام البيانات، غيِّر تصميم عناصر Polyline باستخدام دوال التخصيص.

يوضّح المثال التالي كيفية ضبط نمط مسار نشط باستخدام دالة تخصيص. اتّبِع هذا النمط لتخصيص نمط أي عنصر Polyline باستخدام أي من مَعلمات التخصيص الخاصة بالخطوط المتعددة المدرَجة في خيارات تخصيص الخطوط المتعددة في هذا الدليل.

مثال على الرحلات عند الطلب

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

مثال على المهام المُجدوَلة

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: DeliveryVehiclePolylineCustomizationFunctionParams) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

مثال على تصميم يتوافق مع حركة المرور (الرحلات عند الطلب فقط)

تعرض Fleet Engine بيانات سرعة حركة المرور للمسارات النشطة والمتبقية للمركبة التي يتم تتبُّعها. يمكنك استخدام هذه المعلومات لتصميم عناصر Polyline وفقًا لسرعات حركة المرور:

JavaScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

التحكّم في مستوى ظهور الخطوط المتعددة

تكون جميع عناصر Polyline مرئية تلقائيًا. لإخفاء عنصر Polyline، اضبط السمة visible على false.

مثال على الرحلات عند الطلب أو المهام المُجدوَلة

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

عرض نافذة معلومات لمركبة أو علامة موقع جغرافي

يمكنك استخدام InfoWindow لعرض معلومات إضافية حول مركبة أو علامة موقع جغرافي.

يوضّح المثال التالي كيفية إنشاء InfoWindow وإرفاقه بعلامة مركبة.

مثال على الرحلات عند الطلب

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off point.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off.`);
    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

مثال على المهام المُجدوَلة

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.deliveryVehicle) {
    const distance =
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
  if (e.deliveryVehicle) {
    const distance =
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

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

• تنسيق خريطة
• تخصيص العلامات