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

اختيار النظام الأساسي: نظام التشغيل 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};