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