يتناول هذا المستند كيفية تخصيص الخطوط المتعددة للمسار للخريطة التي تستخدمها في تطبيقك المخصّص لتتبّع الرحلات المستند إلى الويب لمستخدمي المستهلكين ومشغّلي الأسطول.
باستخدام حزمة SDK للمستهلك، يمكنك التحكم في مستوى رؤية الخطوط المتعددة للمسار أو تصميم
المسارات المتعددة الخطوط لمسار الرحلة على الخريطة. تنشئ حزمة SDK
عنصر google.maps.Polyline
لكل زوج من الإحداثيات في رحلة
مسار نشط أو متبقي. ثم تطبق المكتبة هذه التخصيصات في
حالتين:
- قبل إضافة الكائنات إلى الخريطة
- عندما تتغير البيانات المستخدمة للكائنات
الخطوط المتعددة لمسار النمط
مثلما يمكنك تصميم العلامات، يمكنك تنسيق الخطوط المتعددة باستخدام مَعلمات التخصيص. ومن ثم، يمكنك ضبط النمط باستخدام إحدى النُهُج التالية:
- الأبسط: استخدِم
PolylineOptions
للتطبيق على جميع تمت مطابقة عناصرPolyline
عند إنشائها أو تعديلها. - متقدّمة: حدِّد دالة تخصيص.
تسمح وظائف التخصيص بتصميم فردي للكائنات بناءً على
البيانات المرسلة بواسطة Fleet Engine. يمكن للدالة تغيير نمط كل
كائن بناءً على الحالة الحالية للرحلة؛ على سبيل المثال، تلوين
درجة لون
Polyline
أغمق أو تزيد سمكها عندما تكون المركبة والتحرك بشكل أبطأ. يمكنك أيضًا الانضمام إلى التحديات من مصادر خارج Fleet Engine. وحدِّد نمط عنصرPolyline
استنادًا إلى هذه المعلومات.
مَعلمات التخصيص
عند تصميم الخطوط المتعددة لمسار، يمكنك استخدام المعلمات المقدمة في
FleetEngineShipmentLocationProviderOptions
توفر هذه المعلمات
حالات المسارات المختلفة في رحلة المركبة، على النحو التالي:
- المسارات التي سبق أن تم نقلها: استخدِم
takenPolylineCustomization
. - مسار التنقّل بشكل نشط: استخدِم
activePolylineCustomization
. - المسار الذي لم يتم الانتقال إليه بعد: استخدِم
remainingPolylineCustomization
.
استخدام 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};