Z tego dokumentu dowiesz się, jak dostosować znaczniki pojazdów i lokalizacji na mapie używanej w aplikacji internetowej do śledzenia przesyłek dla konsumentów.
Za pomocą pakietu JavaScript Consumer SDK możesz dostosować wygląd i styl 2 typów znaczników dodawanych do mapy:
- Znaczniki pojazdów dostawczych: użyj
deliveryVehicleMarkerCustomization - Znaczniki miejsc docelowych: użyj
destinationMarkerCustomization
Możesz to zrobić na 2 sposoby:
- Najprostszy: określ obiekt
MarkerOptions, który ma być stosowany do wszystkich znaczników tego samego typu. Pakiet Consumer SDK stosuje stylizację w 2 sytuacjach: przed dodaniem znaczników do mapy oraz gdy zmienią się dane używane do znaczników. - Bardziej zaawansowany: określ funkcję dostosowywania. Funkcje dostosowywania umożliwiają stylizowanie znaczników na podstawie danych, a także dodawanie do nich interaktywności, np. obsługi kliknięć. Pakiet Consumer SDK przekazuje do funkcji dostosowywania dane o typie obiektu, który reprezentuje znacznik: pojazd lub miejsce docelowe. Dzięki temu stylizację znacznika można zmieniać w zależności od jego bieżącego stanu, np. liczby planowanych przystanków pozostałych do miejsca docelowego. Możesz nawet połączyć dane ze źródeł spoza Fleet Engine i stylizować znacznik na podstawie tych informacji.
Prosty przykład: użycie MarkerOptions
Poniższy przykład pokazuje, jak skonfigurować stylizację znacznika pojazdu za pomocą obiektu MarkerOptions. W tym przykładzie ustawiamy nieprzezroczystość znacznika na 50%.
JavaScript
deliveryVehicleMarkerCustomization = {
opacity: 0.5
};
TypeScript
deliveryVehicleMarkerCustomization = {
opacity: 0.5
};
Zaawansowany przykład: użycie funkcji dostosowywania
Poniższy przykład pokazuje, jak skonfigurować stylizację znacznika pojazdu, aby wyświetlać liczbę pozostałych przystanków przed dotarciem do przystanku dla zaplanowanego zadania.
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}`);
};
Dodawanie obsługi kliknięć do znaczników
Do dowolnego znacznika możesz dodać obsługę kliknięć, np. tak jak w poniższym przykładzie w przypadku znacznika pojazdu.
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.
});
}
};
Wyświetlanie dodatkowych informacji o znacznikach
Za pomocą InfoWindow możesz wyświetlać dodatkowe informacje o znaczniku pojazdu lub lokalizacji. Poniższy przykład tworzy InfoWindow i dołącza go do znacznika pojazdu:
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();