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

اختيار النظام الأساسي: Android iOS JavaScript

يتناول هذا المستند كيفية تخصيص الخطوط المتعددة للمسارات للخريطة التي تستخدمها في تطبيق تتبُّع الرحلة المستنِد إلى الويب والمخصّص للمستهلكين.

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

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

أنماط خطوط المسار المتعدّدة

على غرار الطريقة التي يمكنك بها تصميم شكل العلامات، يمكنك تصميم شكل الخطوط المتعددة للمسار باستخدام مَعلمات التخصيص. من هناك، يمكنك ضبط التصميم باستخدام إحدى الطريَقتَين التاليتَين:

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

مَعلمات التخصيص

عند تصميم الخطوط المتعددة للمسار، يمكنك استخدام المَعلمات المقدَّمة في FleetEngineTripLocationProviderOptions. توفّر هذه المَعلمات حالات مسارات مختلفة في رحلة المركبة، على النحو التالي:

استخدام PolylineOptions

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

JavaScript

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

TypeScript

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

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

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

JavaScript

// Color the route polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.trip.remainingWaypoints[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 route Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: TripPolylineCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints[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'});
      }
    }
  };

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

تكون جميع عناصر Polyline مرئية تلقائيًا. لجعل عنصر Polyline غير مرئي، اضبط السمة visible:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};