במסמך הזה מוסבר איך להתאים אישית סמני מיקום ורכבים במפה. שבה משתמשים לאפליקציה מבוססת-האינטרנט למעקב אחר משלוחים לצרכנים.
עם JavaScript Consumer SDK, אפשר להתאים אישית את המראה והתחושה של סוגי סמנים שנוספו למפה:
- סמלים של כלי רכב למשלוח: השתמשו בסמל
deliveryVehicleMarkerCustomization
- סמני יעד: יש להשתמש ב-
destinationMarkerCustomization
אפשר לעשות זאת באחת משתי הדרכים הבאות:
- הכי פשוט: מציינים אובייקט
MarkerOptions
שצריך להחיל על כל הסמנים. מאותו סוג. לאחר מכן, Consumer SDK מחיל את הסגנון מצבים: לפני הוספת הסמנים למפה והזמן שבו נעשה שימוש בנתונים של הסמנים השתנו. - מתקדם: ציון פונקציית התאמה אישית. פונקציות של התאמה אישית לאפשר עיצוב של הסמנים שמבוססים על נתונים, וגם להוסיף האינטראקטיביות לסמנים, כמו טיפול בקליקים. באופן ספציפי, הצרכן ערכת ה-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();