La bibliothèque JavaScript de suivi de flotte
permet de visualiser les emplacements
des véhicules de leurs flottes, en temps quasi réel. La bibliothèque utilise
API Deliveries
pour visualiser les tâches et les véhicules de livraison. Comme
Bibliothèque JavaScript Shipment Tracking
elle contient un composant de carte JavaScript qui est un outil de remplacement prête à l'emploi.
pour qu'une entité google.maps.Map
standard et les composants de données se connectent
avec Fleet Engine.
Composants
La bibliothèque JavaScript Fleet Tracking Library fournit des composants pour la visualisation de véhicules et d'arrêts de livraison, ainsi que les flux de données brutes pour l'heure d'arrivée prévue ou la distance jusqu'à la livraison.
Vue Plan du suivi de flotte
Le composant de vue Plan du suivi de flotte permet de visualiser l'emplacement des véhicules et des tâches. Si l'itinéraire d'un véhicule est connu, Le composant "Vue plan" anime le véhicule à mesure qu'il se déplace sur sa trajectoire prédite.
Fournisseurs de services de localisation
Les fournisseurs de localisation utilisent les informations stockées dans Fleet Engine pour envoyer des données de localisation des informations sur les objets suivis dans la carte de partage du trajet.
Fournisseur de services de localisation de véhicules de livraison
Le fournisseur de localisation du véhicule de livraison affiche les attributs les informations de localisation. Il contient des informations sur l'emplacement du véhicule, les tâches qui ont été réalisées par le véhicule de livraison.
Fournisseur de géolocalisation pour la flotte de livraison
Le fournisseur de localisation de la flotte de livraison affiche les informations lieu des informations. Vous pouvez filtrer par véhicule ou par lieu, ou afficher l'ensemble de la flotte.
Contrôler la visibilité des lieux suivis
Cette section décrit les règles de visibilité des objets "Lieu suivi" sur la carte pour le fournisseur de localisation prédéfini Fleet Engine. Personnalisé ou dérivé les fournisseurs de services de localisation peuvent modifier les règles de visibilité.
Véhicules de livraison
Un véhicule de livraison est visible dès qu'il est créé dans Fleet Engine. et est visible tout au long de son parcours, quelles que soient ses tâches.
Repères de position des tâches
Les arrêts de véhicule prévus sont affichés sur la carte sous forme de repères d'arrêt de véhicule. Repères des tâches terminées s'affichent dans un style différent de celui du véhicule les arrêts prévus.
L'emplacement des résultats d'une tâche est affiché avec des repères de résultat. Les tâches dont le résultat est "SUCCEEDED" (Réussite) sont affichées avec les marqueurs de réussite des tâches, tandis que toutes les autres tâches sont affichées avec les marqueurs des tâches échouées.
Premiers pas avec la bibliothèque JavaScript Fleet Tracking
Avant d'utiliser la bibliothèque JavaScript Fleet Tracking Library, vérifiez que : vous connaissez Fleet Engine et d'obtenir une clé API. Créez ensuite un ID de tâche et une revendication d'ID de véhicule de livraison.
Créer un ID de tâche et une revendication d'ID de véhicule de livraison
Pour suivre les véhicules de livraison à l'aide du fournisseur de localisation de véhicules de livraison, procédez comme suit : créer un jeton Web JSON (JWT) avec un ID de tâche et une revendication d'ID de véhicule de livraison ;
Pour créer la charge utile JWT, ajoutez une revendication supplémentaire dans la section "Autorisation". avec les clés taskid et deliveryvehicleid, puis définissez la valeur de chaque clé par *. Le jeton doit être créé à l'aide de l'API Fleet Engine super-utilisateur du service Cloud IAM. Notez que cela accorde un accès étendu pour créer, lire et modifier des entités Fleet Engine, et ne doit être partagé avec des utilisateurs de confiance.
L'exemple suivant montre comment créer un jeton pour le suivi par véhicule et tâche:
{
"alg": "RS256",
"typ": "JWT",
"kid": "private_key_id_of_consumer_service_account"
}
.
{
"iss": "superuser@yourgcpproject.iam.gserviceaccount.com",
"sub": "superuser@yourgcpproject.iam.gserviceaccount.com",
"aud": "https://fleetengine.googleapis.com/",
"iat": 1511900000,
"exp": 1511903600,
"scope": "https://www.googleapis.com/auth/xapi",
"authorization": {
"taskid": "*",
"deliveryvehicleid": "*",
}
}
Créer un outil de récupération de jetons d'authentification
Vous pouvez créer un outil de récupération des jetons d'authentification pour récupérer un jeton frappé avec les revendications appropriées sur vos serveurs via un service pour votre projet. Il est important de ne frapper que les jetons sur vos serveurs et de ne jamais partager vos certificats avec des clients. Sinon, vous risquez de compromettre la sécurité de votre système.
L'extracteur doit renvoyer une structure de données. avec deux champs inclus dans une promesse:
- Une chaîne
token
. - Un nombre
expiresInSeconds
. Un jeton expire dans ce délai après la récupération.
La bibliothèque JavaScript Fleet Tracking Library demande un jeton via l'authentification jeton de récupération de jetons lorsque l'une des conditions suivantes est remplie:
- Il ne possède pas de jeton valide, par exemple lorsqu'il n'a pas appelé l'extracteur sur un nouveau chargement de page ou lorsque l'outil d'extraction ne renvoie pas de jeton.
- Le jeton récupéré précédemment a expiré.
- Le jeton récupéré précédemment a expiré moins d'une minute.
Sinon, la bibliothèque utilise le jeton précédemment émis et toujours valide et et non à appeler l'outil d'extraction.
L'exemple suivant montre comment créer un outil de récupération de jetons d'authentification:
JavaScript
function authTokenFetcher(options) {
// options is a record containing two keys called
// serviceType and context. The developer should
// generate the correct SERVER_TOKEN_URL and request
// based on the values of these fields.
const response = await fetch(SERVER_TOKEN_URL);
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
return {
token: data.Token,
expiresInSeconds: data.ExpiresInSeconds
};
}
TypeScript
function authTokenFetcher(options: {
serviceType: google.maps.journeySharing.FleetEngineServiceType,
context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
// The developer should generate the correct
// SERVER_TOKEN_URL based on options.
const response = await fetch(SERVER_TOKEN_URL);
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
return {
token: data.token,
expiresInSeconds: data.expiration_timestamp_ms - Date.now(),
};
}
Lors de l'implémentation du point de terminaison côté serveur pour générer les jetons, conservez à l'esprit ce qui suit:
- Le point de terminaison doit renvoyer un délai d'expiration pour le jeton. dans l'exemple
ci-dessus, il est indiqué sous la forme
data.ExpiresInSeconds
. - L'outil de récupération de jetons d'authentification doit passer le délai d'expiration (en secondes, au moment de la récupération) à la bibliothèque, comme illustré dans l'exemple.
- SERVER_TOKEN_URL dépend de la mise en œuvre de votre backend. Voici les URL du backend de l'exemple d'application:
<ph type="x-smartling-placeholder">
- </ph>
- https://
SERVER_URL
/token/delivery_driver/DELIVERY_VEHICLE_ID
- https://
SERVER_URL
/token/delivery_consumer/TRACKING_ID
- https://
SERVER_URL
/token/fleet_reader
- https://
Charger une carte à partir d'un code HTML
L'exemple suivant montre comment charger le fichier de partage de parcours JavaScript
bibliothèque à partir d'une URL spécifiée. Le paramètre callback exécute la initMap
après le chargement de l'API. L'attribut defer permet au navigateur
le reste de la page pendant le chargement de l'API.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
Suivre un véhicule de livraison
Cette section explique comment utiliser la bibliothèque JavaScript Fleet Tracking pour suivre un véhicule de livraison. Veillez à Charger la bibliothèque à partir de la fonction de rappel spécifiée dans la balise de script avant d'exécuter votre code.
Instancier un fournisseur de localisation pour les véhicules de livraison
La bibliothèque JavaScript Fleet Tracking Library prédéfinit un fournisseur de localisation pour l'API Fleet Engine Deliveries. Utilisez l'ID de votre projet et une référence à votre fabrique de jetons pour l'instancier.
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// deliveryVehicleId to immediately start
// tracking.
deliveryVehicleId: 'your-delivery-id',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// deliveryVehicleId to immediately start
// tracking.
deliveryVehicleId: 'your-delivery-id',
});
Initialiser la vue plan
Après avoir chargé la bibliothèque JavaScript de partage de parcours, initialisez la vue plan et de l'ajouter à la page HTML. Votre page doit contenir Un élément <div> contenant la vue plan Élément <div> est nommée map_canvas dans l'exemple ci-dessous.
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
// Styling customizations; see below.
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-vehicle-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
// Styling customizations; see below.
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-vehicle-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
Écouter les événements de modification
Vous pouvez récupérer des méta-informations sur une tâche à partir de l'objet deliveryVehicle
à l'aide du fournisseur de services de localisation. Les méta-informations comprennent l'heure d'arrivée prévue et
la distance restante avant la prochaine prise en charge ou le prochain dépôt du véhicule. Modifications
aux métadonnées déclenchent un événement update. L'exemple suivant
montre comment écouter
ces événements de modification.
JavaScript
locationProvider.addListener('update', e => {
// e.deliveryVehicle contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicle) {
console.log(e.deliveryVehicle.remainingDuration);
}
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
// e.deliveryVehicle contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicle) {
console.log(e.deliveryVehicle.remainingDuration);
}
});
Écouter les erreurs
Erreurs générées de manière asynchrone par la demande de déclencheur d'informations sur le véhicule de livraison les événements d'erreur. L'exemple suivant montre comment écouter ces événements afin de gérer les erreurs.
JavaScript
locationProvider.addListener('error', e => {
// e.error is the error that triggered the event.
console.error(e.error);
});
TypeScript
locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
// e.error is the error that triggered the event.
console.error(e.error);
});
Arrêter le suivi
Pour empêcher le fournisseur de services de localisation de suivre le véhicule de livraison, supprimez le ID du véhicule de livraison fourni par le fournisseur de services de localisation.
JavaScript
locationProvider.deliveryVehicleId = '';
TypeScript
locationProvider.deliveryVehicleId = '';
Supprimer le fournisseur de localisation de la vue plan
L'exemple suivant montre comment supprimer un fournisseur de localisation de la vue plan.
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);
Afficher un parc de livraison
Cette section explique comment utiliser la bibliothèque JavaScript de partage de parcours pour afficher un parc de livraison. Veillez à Charger la bibliothèque à partir de la fonction de rappel spécifiée dans la balise de script avant d'exécuter votre code.
Instancier un fournisseur de localisation de parc de livraison
La bibliothèque JavaScript Fleet Tracking Library prédéfinit un fournisseur de localisation récupère plusieurs véhicules API FlutterEngine Deliveries : Utilisez votre l'ID du projet, ainsi qu'une référence à votre outil de récupération de jetons pour l'instancier.
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which delivery vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which delivery vehicles are retrieved.
deliveryVehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which delivery vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which delivery vehicles are retrieved.
deliveryVehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
deliveryVehicleFilter
spécifie une requête utilisée pour filtrer les véhicules affichés sur
sur la carte. Ce filtre est transmis directement à Fleet Engine. Voir
ListDeliveryVehiclesRequest.filter
pour connaître les formats acceptés.
locationRestriction
limite la zone dans laquelle afficher les véhicules sur la carte.
Elle contrôle également si le suivi de la position est actif ou non. Suivi de la position
ne démarrera pas tant que ce paramètre n'aura pas été défini.
Une fois le fournisseur de localisation créé, initialiser la vue plan.
Définir une restriction géographique à l'aide de la fenêtre d'affichage de la carte
Les limites locationRestriction
peuvent être configurées pour correspondre à la zone actuellement
visible sur la carte.
JavaScript
google.maps.event.addListenerOnce(
mapView.map, 'bounds_changed', () => {
const bounds = mapView.map.getBounds();
if (bounds) {
// If you did not specify a location restriction in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.locationRestriction = bounds;
}
});
TypeScript
google.maps.event.addListenerOnce(
mapView.map, 'bounds_changed', () => {
const bounds = mapView.map.getBounds();
if (bounds) {
// If you did not specify a location restriction in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.locationRestriction = bounds;
}
});
Écouter les événements de modification
Vous pouvez récupérer des méta-informations sur le parc à partir de deliveryVehicles
à l'aide du fournisseur de localisation. Les méta-informations incluent le véhicule
Propriétés telles que l'état de navigation, la distance restante et les attributs personnalisés
voir
documentation de référence
pour en savoir plus. La modification du paramètre de méta-informations déclenche un événement update. La
L'exemple suivant montre comment écouter ces événements de modification.
JavaScript
locationProvider.addListener('update', e => {
// e.deliveryVehicles contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicles) {
for (vehicle of e.deliveryVehicles) {
console.log(vehicle.remainingDistanceMeters);
}
}
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineDeliveryFleetLocationProviderUpdateEvent) => {
// e.deliveryVehicles contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicles) {
for (vehicle of e.deliveryVehicles) {
console.log(vehicle.remainingDistanceMeters);
}
}
});
Écouter les erreurs
Erreurs survenant de manière asynchrone lors de la demande d'informations sur le parc de livraison déclencher des événements d'erreur. Pour obtenir des exemples montrant comment écouter ces événements, consultez sélectionnez Écouter les erreurs.
Arrêter le suivi
Pour empêcher le fournisseur de services de localisation de suivre la flotte de livraison, définissez des limites du fournisseur de localisation sur "null".
JavaScript
locationProvider.locationRestriction = null;
TypeScript
locationProvider.locationRestriction = null;
Supprimer le fournisseur de localisation de la vue plan
L'exemple suivant montre comment supprimer un fournisseur de localisation de la vue plan.
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);
Suivez un véhicule de livraison et consultez une flotte
Lorsque vous consultez un parc, vous pouvez afficher l'itinéraire et les tâches à venir pour un un véhicule de livraison. Pour ce faire, instanciez à la fois un emplacement de parc de livraison et un fournisseur de localisation des véhicules de livraison, puis ajoutez-les tous les deux Vue plan:
JavaScript
deliveryFleetLocationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which delivery vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which delivery vehicles are retrieved.
deliveryVehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
deliveryVehicleLocationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher
});
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [
deliveryFleetLocationProvider,
deliveryVehicleLocationProvider,
],
// Any other options
});
TypeScript
deliveryFleetLocationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which delivery vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which delivery vehicles are retrieved.
deliveryVehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
deliveryVehicleLocationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher
});
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [
deliveryFleetLocationProvider,
deliveryVehicleLocationProvider,
],
// Any other options
});
Le fournisseur d'emplacements de la flotte de livraison commence à afficher les véhicules de livraison sur sur la carte. Utiliser la personnalisation des repères pour activer la position du véhicule de livraison pour suivre un véhicule de livraison lorsque l'utilisateur clique sur le repère de son parc:
JavaScript
// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// params.vehicle.name follows the format
// "providers/{provider}/deliveryVehicles/{vehicleId}".
// Only the vehicleId portion is used for the delivery vehicle
// location provider.
deliveryVehicleLocationProvider.deliveryVehicleId =
params.vehicle.name.split('/').pop();
});
}
};
TypeScript
// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
(params: google.maps.journeySharing.DeliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// params.vehicle.name follows the format
// "providers/{provider}/deliveryVehicles/{vehicleId}".
// Only the vehicleId portion is used for the delivery vehicle
// location provider.
deliveryVehicleLocationProvider.deliveryVehicleId =
params.vehicle.name.split('/').pop();
});
}
};
Masquer le repère auprès du fournisseur de localisation du véhicule de livraison pour empêcher le rendu deux repères pour le même véhicule:
JavaScript
// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.setVisible(false);
}
};
TypeScript
// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
(params: deliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.setVisible(false);
}
};
Personnaliser l'apparence de la carte de base
Pour personnaliser l'apparence du composant "Cartes" : appliquer un style à votre carte à l'aide d'outils cloud ou en définissant des options directement dans le code.
Utiliser les styles de cartes basés dans le cloud
Styles de cartes basés dans le cloud
vous permet de créer et de modifier des styles de carte pour toutes vos applications utilisant Google Maps
depuis la console Google Cloud sans avoir à modifier votre code.
Les styles de carte sont enregistrés en tant qu'ID de carte dans votre projet Cloud. À
appliquer un style à votre carte JavaScript de suivi du parc, spécifier un
mapId
lorsque vous créez le JourneySharingMapView
. Impossible de modifier le champ mapId
ou ajoutés après l'instanciation de JourneySharingMapView
. Les éléments suivants :
exemple montre comment activer un style de carte créé précédemment avec un
ID de carte.
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
});
Utiliser des styles de cartes basés sur du code
Vous pouvez aussi personnaliser le style de carte
mapOptions
lorsque vous
créer le JourneySharingMapView
.
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
Utiliser la personnalisation des repères
Avec la bibliothèque JavaScript Fleet Tracking Library, vous pouvez personnaliser l'apparence de repères ajoutés à la carte. Pour ce faire, vous devez spécifier des personnalisations de repère, que la bibliothèque de suivi de flotte applique ensuite avant d'ajouter des repères à la carte et à chaque mise à jour des repères.
La personnalisation la plus simple consiste à spécifier
MarkerOptions
qui sera appliqué à tous les repères du même type. Les changements
spécifiés dans l'objet sont appliqués après la création de chaque repère,
en remplaçant les options par défaut.
Une option plus avancée consiste à spécifier une fonction de personnalisation. Personnalisation permettent de styliser les repères en fonction des données et d'ajouter avec les repères, comme la gestion des clics. Plus précisément, le suivi de flotte transmet à la fonction de personnalisation des données sur le type d'objet du repère représente: véhicule, arrêt ou tâche. Cela permet ensuite de modifier le style des repères en fonction de l'état actuel de l'élément de repère lui-même ; par exemple, le nombre des arrêts restants ou le type de tâche. Vous pouvez même effectuer une jointure avec des données provenant de sources en dehors de Fleet Engine et appliquez un style au repère en fonction de ces informations.
Vous pouvez également utiliser des fonctions de personnalisation pour filtrer la visibilité des repères.
Pour ce faire, appelez
setVisible(false)
sur le repère.
Toutefois, pour des raisons de performances, nous vous recommandons de filtrer
le filtrage dans le fournisseur de localisation, comme
FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter
Cela dit, si vous avez besoin d'une
fonctionnalité de filtrage supplémentaire, vous pouvez
à l'aide de la fonction de personnalisation.
La bibliothèque de suivi de flotte fournit les paramètres de personnalisation suivants:
Modifier le style des repères à l'aide de MarkerOptions
L'exemple suivant montre comment configurer le style d'un repère de véhicule avec
un objet MarkerOptions
. Suivez ce modèle pour personnaliser le style
le repère à l'aide de l'un des paramètres de personnalisation des repères listés ci-dessus.
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
Modifier le style des repères à l'aide de fonctions de personnalisation
L'exemple suivant montre comment configurer le style d'un repère de véhicule. Suivre ce motif pour personnaliser le style de n'importe quel repère en utilisant l'un des repères les paramètres de personnalisation répertoriés ci-dessus.
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
params.marker.setLabel(`${stopsLeft}`);
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
params.marker.setLabel(`${stopsLeft}`);
};
Ajouter la gestion des clics aux repères
L'exemple suivant montre comment ajouter la gestion des clics à un repère de véhicule. Suivez cette procédure pour ajouter la gestion des clics à n'importe quel repère utilisant l'un de ces repères. les paramètres de personnalisation répertoriés ci-dessus.
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
Filtrer les repères visibles
L'exemple suivant montre comment filtrer les repères de véhicule visibles. Suivez ce schéma pour filtrer tous les repères en utilisant l'une des options de personnalisation des repères. les paramètres ci-dessus.
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};
Utiliser les personnalisations de polylignes lorsque vous suivez un véhicule de livraison
Avec la bibliothèque JavaScript Fleet Tracking Library, vous pouvez également personnaliser l'apparence
l'impression de l'itinéraire du véhicule suivi sur la carte. La bibliothèque crée
google.maps.Polyline
pour chaque paire de coordonnées dans les données actives ou restantes
path.
Vous pouvez styliser les objets Polyline
en spécifiant des personnalisations de polyligne. La
applique ensuite ces personnalisations dans deux situations: avant d'ajouter la classe
objets à la carte, et quand les données utilisées pour ces objets ont changé.
Comme pour la personnalisation des repères, vous pouvez spécifier un ensemble
PolylineOptions
à appliquer à tous les objets Polyline
correspondants lorsqu'ils
créées ou mises à jour.
De même, vous pouvez spécifier une fonction de personnalisation. Fonctions de personnalisation
permettent d'appliquer un style individuel aux objets en fonction des données envoyées par Fleet Engine.
La fonction peut modifier le style de chaque objet en fonction du véhicule actuel
state; (par exemple, en colorant l'objet Polyline
avec une nuance plus profonde ou en donnant
plus épais lorsque le véhicule roule plus lentement. Vous pouvez même
participer à
sources externes à Fleet Engine et appliquez un style à l'objet Polyline
en fonction
des informations.
Vous pouvez spécifier les personnalisations à l'aide des paramètres fournis dans
FleetEngineDeliveryVehicleLocationProviderOptions
Vous pouvez définir des personnalisations pour différents états de chemin dans les
(j'ai déjà voyagé, en voyage actif ou je n'ai pas encore voyagé). La
sont les suivants:
takenPolylineCustomization
, pour un chemin déjà emprunté ;activePolylineCustomization
, pour un parcours actif ;remainingPolylineCustomization
, sur un chemin qui n'a pas encore été emprunté.
Modifier le style des objets Polyline
à l'aide de PolylineOptions
L'exemple suivant montre comment configurer le style d'un objet Polyline
avec
PolylineOptions
Suivez ce schéma pour personnaliser le style de n'importe quel objet Polyline
à l'aide des
des personnalisations de polylignes répertoriées précédemment.
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
Modifier le style des objets Polyline
à l'aide de fonctions de personnalisation
L'exemple suivant montre comment configurer le style d'une polyligne active
à l'aide d'une fonction de personnalisation. Suivez ce schéma pour personnaliser
styliser n'importe quel objet Polyline
en utilisant l'une des options de personnalisation de la polyligne
les paramètres listés précédemment.
JavaScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.deliveryVehicle.remainingDistanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
TypeScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params: DeliveryVehiclePolylineCustomizationFunctionParams) => {
const distance = params.deliveryVehicle.remainingDistanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
Contrôler la visibilité des objets Polyline
Par défaut, tous les objets Polyline
sont visibles. Créer un objet Polyline
invisible, définissez
visible
:
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
Afficher un InfoWindow
pour un véhicule ou un repère de position
Vous pouvez utiliser un InfoWindow
pour afficher des informations supplémentaires sur un véhicule ou un repère de position.
L'exemple suivant montre comment créer une InfoWindow
et l'associer
à un repère de véhicule.
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
if (e.deliveryVehicle) {
const distance =
e.deliveryVehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next task.`);
// 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});
// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
if (e.deliveryVehicle) {
const distance =
e.deliveryVehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next task.`);
// 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();
Désactiver l'ajustement automatique
Vous pouvez empêcher la carte d'ajuster automatiquement la fenêtre d'affichage au véhicule et prévu en désactivant l'ajustement automatique. L'exemple suivant montre comment désactiver l'ajustement automatique lorsque vous configurez le partage du parcours la vue plan.
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
Remplacer une carte existante
Vous pouvez remplacer une carte existante qui inclut des repères ou d'autres personnalisations sans perdre ces personnalisations.
Par exemple, supposons que l'une de vos pages Web comporte un google.maps.Map
standard
entité sur laquelle un repère est affiché:
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
// Initialize and add the map
function initMap() {
// The location of Uluru
var uluru = {lat: -25.344, lng: 131.036};
// The map, initially centered at Mountain View, CA.
var map = new google.maps.Map(document.getElementById('map'));
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, now positioned at Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
}
</script>
<!-- Load the API from the specified URL.
* The async attribute allows the browser to render the page while the API loads.
* The key parameter will contain your own API key (which is not needed for this tutorial).
* The callback parameter executes the initMap() function.
-->
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
Pour ajouter la bibliothèque JavaScript de partage de trajet, qui inclut le suivi de flotte, procédez comme suit:
- Ajoutez du code pour la fabrique de jetons d'authentification.
- Initialisez un fournisseur de localisation dans la fonction
initMap()
. - Initialisez la vue de carte dans la fonction
initMap()
. La vue contient la carte. - Déplacez votre personnalisation dans la fonction de rappel pour l'initialisation de la vue de carte.
- Ajoutez la bibliothèque d'emplacements au chargeur d'API.
L'exemple suivant montre les modifications à apporter:
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
let locationProvider;
// (1) Authentication Token Fetcher
function authTokenFetcher(options) {
// options is a record containing two keys called
// serviceType and context. The developer should
// generate the correct SERVER_TOKEN_URL and request
// based on the values of these fields.
const response = await fetch(SERVER_TOKEN_URL);
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
return {
token: data.Token,
expiresInSeconds: data.ExpiresInSeconds
};
}
// Initialize and add the map
function initMap() {
// (2) Initialize location provider. Use FleetEngineDeliveryVehicleLocationProvider
// as appropriate.
locationProvider = new google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProvider({
YOUR_PROVIDER_ID,
authTokenFetcher,
});
// (3) Initialize map view (which contains the map).
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map'),
locationProviders: [locationProvider],
// any styling options
});
mapView.addListener('ready', () => {
locationProvider.deliveryVehicleId = DELIVERY_VEHICLE_ID;
// (4) Add customizations like before.
// The location of Uluru
var uluru = {lat: -25.344, lng: 131.036};
// The map, initially centered at Mountain View, CA.
var map = mapView.map;
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, now positioned at Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
};
}
</script>
<!-- Load the API from the specified URL
* The async attribute allows the browser to render the page while the API loads
* The key parameter will contain your own API key (which is not needed for this tutorial)
* The callback parameter executes the initMap() function
*
* (5) Add the journey sharing library to the API loader, which includes Fleet Tracking functionality.
-->
<script defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
</script>
</body>
</html>
Si vous utilisez un véhicule de livraison avec spécifié près d'Uluru, il sera maintenant affiché sur la carte.