In diesem Dokument wird beschrieben, wie Sie Fahrzeug- und Standortmarkierungen auf der Karte anpassen, die Sie in Ihrer webbasierten Versandverfolgungs-App für Verbraucher verwenden.
Mit dem JavaScript Consumer SDK können Sie das Erscheinungsbild von zwei Arten von Markierungen anpassen, die der Karte hinzugefügt werden:
- Markierungen für Lieferfahrzeuge: Verwenden Sie
deliveryVehicleMarkerCustomization
. - Zielmarkierungen: Verwenden Sie
destinationMarkerCustomization
.
Dazu haben Sie zwei Möglichkeiten:
- Einfachste: Geben Sie ein
MarkerOptions
-Objekt an, das auf alle Markierungen desselben Typs angewendet werden soll. Das Consumer SDK wendet das Styling dann in zwei Situationen an: bevor die Markierungen der Karte hinzugefügt werden und wenn sich die für die Markierungen verwendeten Daten geändert haben. - Erweitert: Geben Sie eine Anpassungsfunktion an. Mit Anpassungsfunktionen können Sie die Markierungen basierend auf Daten formatieren und ihnen Interaktivität hinzufügen, z. B. die Klickbehandlung. Das Consumer SDK übergibt der Anpassungsfunktion Daten zum Objekttyp, den die Markierung darstellt: Fahrzeug oder Ziel. So kann sich das Markierungs-Styling je nach aktuellem Status des Markierungselements ändern, z. B. die Anzahl der geplanten Haltestellen bis zum Ziel. Sie können sogar Daten aus Quellen außerhalb der Fleet Engine zusammenführen und die Markierungen basierend auf diesen Informationen formatieren.
Einfaches Beispiel: MarkerOptions
verwenden
Im folgenden Beispiel wird der Stil einer Fahrzeugmarkierung mit einem MarkerOptions
-Objekt konfiguriert. In diesem Beispiel wird die Deckkraft der Markierung auf 50 % festgelegt.
JavaScript
deliveryVehicleMarkerCustomization = {
opacity: 0.5
};
TypeScript
deliveryVehicleMarkerCustomization = {
opacity: 0.5
};
Fortgeschrittenes Beispiel: Anpassungsfunktion verwenden
Im folgenden Beispiel wird gezeigt, wie Sie das Design einer Fahrzeugmarkierung so konfigurieren, dass die verbleibende Anzahl der Haltestellen für das Fahrzeug angezeigt wird, bevor es die Haltestelle für die geplante Aufgabe erreicht.
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}`);
};
Click Handling zu Markierungen
Sie können jeder Markierung eine Klickbehandlung hinzufügen, wie im folgenden Beispiel für eine Fahrzeugmarkierung.
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.
});
}
};
Zusätzliche Informationen zu Markierungen anzeigen
Mit einem InfoWindow
lassen sich zusätzliche Informationen zu einem Fahrzeug oder einer Standortmarkierung anzeigen. Im folgenden Beispiel wird eine InfoWindow
erstellt und an eine Fahrzeugmarkierung angehängt:
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();