يتناول هذا المستند كيفية تخصيص علامات المركبات والمواقع الجغرافية في الخريطة التي تستخدمها في تطبيق تتبُّع الشحنات المستند إلى الويب والمخصّص للمستهلكين.
باستخدام حزمة JavaScript Consumer SDK، يمكنك تخصيص مظهر نوعين من العلامات المُضافة إلى الخريطة:
- علامات مركبات التسليم: استخدِم
deliveryVehicleMarkerCustomization
. - علامات الوجهات: استخدِم
destinationMarkerCustomization
.
يمكنك إجراء ذلك بطريقتَين:
- أبسط طريقة: حدِّد عنصر
MarkerOptions
لتطبيقه على جميع العلامات من النوع نفسه. بعد ذلك، تطبِّق حزمة تطوير البرامج Consumer SDK التصميم في حالتَين: قبل إضافة العلامات إلى الخريطة، وعند تغيُّر البيانات المستخدَمة في العلامات. - الإعدادات الأكثر تقدمًا: حدِّد وظيفة تخصيص. تتيح وظائف التخصيص تصميم العلامات استنادًا إلى البيانات، بالإضافة إلى إضافة تفاعل إلى العلامات، مثل معالجة النقرات. على وجه التحديد، تُرسِل حزمة Consumer SDK البيانات إلى وظيفة التخصيص عن نوع العنصر الذي يمثّله العلامة: المركبة أو الوجهة. يتيح ذلك بعد ذلك تغيير أسلوب العلامة استنادًا إلى الحالة الحالية لعنصر العلامة نفسه، مثلاً عدد المحطات المخطّط لها المتبقية حتى الوصول إلى الوجهة. يمكنك الربط أيضًا ببيانات من مصادر خارج Fleet Engine وتنسيق العلامة استنادًا إلى هذه المعلومات.
مثال بسيط: استخدِم MarkerOptions
.
يوضّح المثال التالي كيفية ضبط نمط علامة المركبة باستخدام عنصر
MarkerOptions
. يضبط هذا المثال شفافية العلامة على %50.
JavaScript
deliveryVehicleMarkerCustomization = {
opacity: 0.5
};
TypeScript
deliveryVehicleMarkerCustomization = {
opacity: 0.5
};
مثال متقدّم: استخدام دالة تخصيص
يوضّح المثال التالي كيفية ضبط أسلوب علامة المركبة لمحاولة عرض عدد المحطات المتبقية للمركبة قبل الوصول إلى المحطة الخاصة بالمهمة المُجدوَلة.
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.taskTrackingInfo.remainingStopCount;
params.marker.setLabel(`${stopsLeft}`);
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: ShipmentMarkerCustomizationFunctionParams) => {
const stopsLeft = params.taskTrackingInfo.remainingStopCount;
params.marker.setLabel(`${stopsLeft}`);
};
إضافة معالجة النقرات إلى العلامات
يمكنك إضافة معالجة النقرات إلى أيّ علامة، كما هو موضّح في المثال التالي لعلامة مركبة.
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: ShipmentMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
عرض معلومات إضافية عن العلامات
يمكنك استخدام InfoWindow
لعرض معلومات إضافية عن
مركبة أو علامة موقع جغرافي. ينشئ المثال التالي رمزًا
InfoWindow
ويربطه بعلامة مركبة:
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', e => {
const stopsCount =
e.taskTrackingInfo.remainingStopCount;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
});
// 3. Close the info window.
infoWindow.close();
TypeScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
const stopsCount =
e.taskTrackingInfo.remainingStopCount;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
});
// 3. Close the info window.
infoWindow.close();