Z tego dokumentu dowiesz się, jak dostosować znaczniki pojazdu i lokalizacji na mapie którego używasz w internetowej aplikacji do śledzenia przesyłek.
Za pomocą pakietu JavaScript Consumer SDK możesz dostosować wygląd i styl 2 typy znaczników dodanych do mapy:
- Znaczniki pojazdu dostarczanego: użyj
deliveryVehicleMarkerCustomization
- Znaczniki miejsc docelowych: użyj
destinationMarkerCustomization
Możesz to zrobić na 2 sposoby:
- Najprostsze: określ obiekt
MarkerOptions
, który zostanie zastosowany do wszystkich znaczników. tego samego typu. Pakiet Consumer SDK stosuje styl w dwóch przed dodaniem znaczników do mapy oraz kiedy dane zostały użyte dla znaczników uległy zmianie. - Bardziej zaawansowane: określ funkcję dostosowywania. Funkcje dostosowywania pozwalają na określanie stylu znaczników na podstawie danych oraz dodawanie interaktywność ze znacznikami, na przykład obsługę kliknięć. Konkretnie rzecz biorąc, SDK przekazuje do funkcji dostosowywania dane dotyczące typu obiektu znacznik reprezentuje pojazd lub cel podróży. Pozwoli to na określanie stylu znacznika zmienia się odpowiednio do bieżącego stanu samego elementu znacznika; w przypadku na przykład liczba zaplanowanych przystanków do momentu dotarcia do miejsca docelowego. Ty może nawet łączyć się z danymi ze źródeł spoza Fleet Engine i określać styl na podstawie tych informacji.
Prosty przykład: użyj atrybutu MarkerOptions
Poniższy przykład pokazuje, jak skonfigurować styl znacznika pojazdu za pomocą
MarkerOptions
obiekt. W tym przykładzie przezroczystość znacznika jest ustawiana na 50%.
JavaScript
deliveryVehicleMarkerCustomization = {
opacity: 0.5
};
TypeScript
deliveryVehicleMarkerCustomization = {
opacity: 0.5
};
Przykład zaawansowany: korzystanie z funkcji dostosowywania
Poniższy przykład pokazuje, jak skonfigurować styl znacznika pojazdu, aby wyświetlać liczbę pozostałych przystanków dla pojazdu przed dojazdem do zaplanowane zadanie.
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}`);
};
Dodaj obsługę kliknięć do znaczników
Obsługę kliknięć można dodać do dowolnego znacznika, jak w przykładzie poniżej dla 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świetl dodatkowe informacje o znacznikach
InfoWindow
pozwala wyświetlić dodatkowe informacje na temat:
pojazdu lub lokalizacji. Ten przykład pozwala utworzyć
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();