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

يتناول هذا المستند كيفية تخصيص مظهر ومظهر المسارات التي يتم تتبعها. المركبات على الخريطة. يتم رسم المسارات على الخريطة باستخدام الخطوط المتعددة. لكل زوج من في مسار المركبة النشط أو المتبقي، تنشئ المكتبة الكائن 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 باستخدام أي من تخصيصات الخطوط المتعددة للمسارات المُدرَجة في خيارات تخصيص الخطوط المتعددة في هذا الدليل.

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

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

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

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

لتحديد تنسيق الخطوط المتعددة باستخدام البيانات، عليك تغيير نمط عناصر Polyline. باستخدام وظائف التخصيص.

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

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

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

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

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

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

// 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 العناصر وفقًا لسرعات حركة المرور:

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

// 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.

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

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};

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

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

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

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

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

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

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

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

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

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

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