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

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

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

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

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

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

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

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

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

• مسارات تمت زيارتها من قبل: استخدِم takenPolylineCustomization.
• المسار المستخدَم بشكل نشط: استخدِم activePolylineCustomization.
• مسار لم تتم زيارته بعد: استخدِم remainingPolylineCustomization.

استخدام PolylineOptions

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

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

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

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

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

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

// 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 على النحو التالي:

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};