تخصيص شكل ومظهر العلامات التي تمت إضافتها إلى الخريطة. تخصيص المظهر ومظهر العلامات التي تمت إضافتها إلى الخريطة بطريقتين:
علامات النمط استنادًا إلى النوع: حدد
MarkerOptions
كائن إلى علامات النمط من النوع نفسه. التغييرات التي تحددها هي ثم يتم تطبيقها بعد إنشاء كل علامة، وتستبدل أي خيارات افتراضية. على سبيل المثال، راجع تغيير نمط العلامات باستخدام العلامةMarkerOptions
في هذه الدليل.علامات أنماط استنادًا إلى البيانات: حدِّد وظيفة تخصيص وعلامات النمط بناءً على البيانات. يمكنك التصميم استنادًا إلى بيانات من الرحلة التي تتم مشاركتها، أو من مصادر خارجية:
البيانات من مشاركة الرحلة: تعمل مشاركة الرحلة على تمرير بيانات العلامات إلى وظيفة التخصيص بما في ذلك نوع الكائن الذي تمثله العلامة: المركبة أو نقطة الانطلاق أو نقطة الطريق أو الوجهة. يتم تغيير نمط العلامة بعد ذلك استنادًا إلى الحالة الحالية لعنصر العلامة. على سبيل المثال، الرقم من نقاط الطريق المتبقية حتى تنتهي السيارة من الرحلة.
المصادر الخارجية: يمكنك الجمع بين بيانات مشاركة الرحلة مع البيانات من مصادر خارج Fleet Engine وتصميم العلامة بناءً على ذلك المعلومات أيضًا.
على سبيل المثال، راجع تغيير نمط العلامات باستخدام وظائف التخصيص الواردة في هذا الدليل.
إضافة معالجة النقر إلى العلامات: للحصول على أمثلة، راجِع المقالة إضافة طريقة معالجة النقرات.
خيارات تخصيص العلامة
يستخدم كلا الخيارين مَعلمات التخصيص التالية في حساب
Maps JavaScript API ضمن
FleetEngineTripLocationProviderOptions
:
vehicleMarkerCustomization
originMarkerCustomization
waypointMarkerCustomization
destinationMarkerCustomization
تغيير نمط العلامات باستخدام MarkerOptions
يوضّح المثال التالي كيفية ضبط تصميم محدّد موقع المركبة باستخدام
عنصر MarkerOptions
. اتبع هذا النمط لتخصيص تصميم أي
باستخدام أي من تخصيصات العلامة المدرجة في
خيارات تخصيص العلامة:
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
تغيير تصميم العلامات باستخدام وظائف التخصيص
يوضّح المثال التالي كيفية ضبط تصميم محدّد موقع المركبة باستخدام وظائف التخصيص. اتبع هذا النمط لتخصيص تصميم أي باستخدام أي من معلمات تخصيص العلامة المدرجة في خيارات تخصيص العلامة:
JavaScript
vehicleMarkerCustomization =
(params) => {
var distance = params.trip.remainingWaypoints.length;
params.marker.setLabel(`${distance}`);
};
TypeScript
vehicleMarkerCustomization =
(params: TripMarkerCustomizationFunctionParams) => {
const distance = params.trip.remainingWaypoints.length;
params.marker.setLabel(`${distance}`);
};
إضافة معالجة النقر إلى العلامات
يوضّح المثال التالي كيفية إضافة طريقة التعامل مع النقرات إلى علامة المركبة. اتبع هذا النمط لإضافة معالجة النقر إلى أي علامة باستخدام أي من العلامات مَعلمات التخصيص المدرَجة في خيارات تخصيص العلامة
JavaScript
vehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
vehicleMarkerCustomization =
(params: TripMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};