ניתן להתאים אישית את המראה והתחושה של הסמנים שנוספו למפה. התאמה אישית של המראה והרגשה של סמנים שנוספו למפה בשתי דרכים:
סמני סגנון על סמך סוג: מציינים
MarkerOptions
כדי ליצור סמני סגנון מאותו סוג. השינויים שתגדירו הם ולאחר מכן מוחלת לאחר שכל סמן נוצר, ומחליף את כל אפשרויות ברירת המחדל. דוגמאות: ניתן לשנות את הסגנון של הסמנים באמצעותMarkerOptions
מותאמת אישית.סמני סגנון שמבוססים על נתונים: ציון פונקציית התאמה אישית שתשמש סמני סגנון שמבוססים על נתונים. אפשר לעצב על סמך נתונים מהתהליך משיתוף או ממקורות חיצוניים:
נתונים משיתוף המסלול: שיתוף המסלול מעביר את נתוני הסמנים פונקציית התאמה אישית, כולל סוג האובייקט שהסמן מייצג: רכב, נקודת המוצא, ציון הדרך או היעד. עיצוב הסמן ולאחר מכן משתנה על סמך המצב הנוכחי של רכיב הסמן. לדוגמה, המספר של ציוני דרך שנותרו עד לסיום הנסיעה על ידי הרכב.
מקורות חיצוניים: אפשר לשלב את התהליך של שיתוף הנתונים עם נתונים ממקורות מחוץ ל-Fleet Engine ומעצבים את הסמן לפי מידע גם.
דוגמאות: שינוי העיצוב של הסמנים באמצעות פונקציות של התאמה אישית במדריך הזה.
הוספת טיפול בקליקים לסמנים: לדוגמה, ראה הוספת טיפול בקליקים.
אפשרויות להתאמה אישית של סמנים
שתי האפשרויות משתמשות בפרמטרים הבאים של התאמה אישית ב-Google
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.
});
}
};