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

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

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

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

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

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

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

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

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

استخدام 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.taskTrackingInfo.remainingDrivingDistanceMeters;
    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: ShipmentPolylineCustomizationFunctionParams) => {
    const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
    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};