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

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

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

باستخدام حزمة تطوير البرامج (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};