In diesem Dokument wird beschrieben, wie Sie Fahrzeug- und Standortmarkierungen auf der Karte anpassen die Sie für Ihre webbasierte Sendungsverfolgungs-App für Verbraucher nutzen.
Mit dem JavaScript Consumer SDK können Sie das Erscheinungsbild von Markierungstypen, die der Karte hinzugefügt wurden:
- Markierungen für Lieferfahrzeuge:
deliveryVehicleMarkerCustomization
verwenden - Zielmarkierungen: Verwenden Sie
destinationMarkerCustomization
.
Dazu haben Sie zwei Möglichkeiten:
- Einfachste: Geben Sie ein
MarkerOptions
-Objekt an, das auf alle Markierungen angewendet werden soll. desselben Typs. Das Consumer SDK wendet den Stil dann in zwei Situationen: bevor die Markierungen zur Karte hinzugefügt werden und wann die Daten für die Markierungen geändert. - Erweitert: Geben Sie eine Anpassungsfunktion an. Anpassungsfunktionen ermöglichen das Gestalten von Markierungen auf Datenbasis sowie das Hinzufügen von Interaktivität von Markierungen, wie z. B. Klickhandhabung. Konkret gilt: Der Verbraucher Das SDK übergibt der Anpassungsfunktion Daten zum Objekttyp, Markierung steht für: Fahrzeug oder Ziel. Dadurch wird das Gestalten von Markierungen zum Ändern basierend auf dem aktuellen Status des Markierungselements. für z. B. die Anzahl der geplanten Haltestellen bis zum Ziel. Ich Sie können sogar Daten aus Quellen außerhalb von Fleet Engine zusammenführen und den Stil basierend auf diesen Informationen.
Einfaches Beispiel: MarkerOptions
verwenden
Das folgende Beispiel zeigt, wie Sie den Stil einer Fahrzeugmarkierung mit einem
MarkerOptions
-Objekt. In diesem Beispiel wird die Deckkraft der Markierung auf 50 % festgelegt.
JavaScript
deliveryVehicleMarkerCustomization = {
opacity: 0.5
};
TypeScript
deliveryVehicleMarkerCustomization = {
opacity: 0.5
};
Beispiel für Fortgeschrittene: Anpassungsfunktion verwenden
Das folgende Beispiel zeigt, wie Sie den Stil einer Fahrzeugmarkierung so konfigurieren, dass die verbleibende Anzahl der Haltestellen für das Fahrzeug anzuzeigen, bevor die Haltestelle für der geplanten Aufgabe.
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 ein Click Handling hinzufügen, wie im folgenden Beispiel gezeigt. 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
können Sie zusätzliche Informationen zu einer
eine Fahrzeug- oder Standortmarkierung erstellt. Im folgenden Beispiel wird ein
InfoWindow
und hängt es an einer Fahrzeugmarkierung an:
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();