Le SDK JavaScript vous permet de visualiser la localisation de véhicules et les lieux d'intérêt suivis dans Fleet Engine. La bibliothèque contient un composant de carte JavaScript qui remplace directement une entité google.maps.Map
standard et des composants de données pour se connecter à Fleet Engine. À l'aide du SDK JavaScript, vous pouvez proposer une expérience animée et personnalisable de la progression des commandes et des trajets à partir de votre application Web.
Composants
Le SDK JavaScript fournit des composants permettant de visualiser les véhicules et les points de cheminement, ainsi que des flux de données brutes pour l'heure d'arrivée prévue d'un conducteur ou la distance restante à parcourir.
Carte de progression du trajet et de la commande
Le composant de vue plan permet de visualiser la position des véhicules et des points de cheminement. Si l'itinéraire d'un véhicule est connu, le composant de vue plan anime ce véhicule à mesure qu'il se déplace sur la voie prévue.
Fournisseur de position
Le SDK JavaScript inclut un fournisseur de localisation de trajets qui fournit des informations de localisation pour les objets suivis dans la carte de progression des commandes et des trajets.
Vous pouvez utiliser le fournisseur de données de trajet pour suivre les éléments suivants:
- Lieu de prise en charge ou de dépose d'un voyage.
- Position et itinéraire du véhicule attribué au trajet.
Objets de localisation suivie
Le fournisseur de position suit la position d'objets tels que les points de cheminement et les véhicules.
Lieu de départ
Le point de départ est le point de départ d'un trajet. Elle indique le lieu de prise en charge.
Emplacement de la destination
La destination est le lieu où se termine un trajet. Il indique le lieu de dépôt.
Emplacement des points de cheminement
Un point de cheminement désigne un lieu situé sur l'itinéraire d'un trajet suivi. Par exemple, chaque arrêt d'un itinéraire de bus correspond à un point de cheminement.
Emplacement du véhicule
La position du véhicule correspond à sa position suivie. Il peut éventuellement inclure un itinéraire pour le véhicule.
Récupération des jetons d'authentification
Pour contrôler l'accès aux données de localisation stockées dans Fleet Engine, vous devez implémenter sur votre serveur un service de génération de jetons Web JSON (JWT) pour Fleet Engine. Ensuite, implémentez un outil de récupération de jetons d'authentification dans votre application Web, en utilisant le SDK JavaScript pour authentifier l'accès aux données de localisation.
Options de style
Les styles de repère et de polylignes déterminent l'apparence des objets de localisation suivi sur la carte. Vous pouvez utiliser des options de style personnalisé pour modifier le style par défaut afin qu'il corresponde à celui de votre application Web.
Contrôler la visibilité des lieux suivis
Cette section décrit les règles de visibilité des objets de localisation suivis sur la carte pour les fournisseurs de localisation prédéfinie Fleet Engine. Les fournisseurs de localisation personnalisée ou dérivée peuvent modifier les règles de visibilité.
Véhicules
Un véhicule de covoiturage est visible depuis le moment où il est attribué à un trajet jusqu'à l'heure du dépôt. Si le trajet est annulé, le véhicule n'est plus visible.
Tous les autres repères de position
Tous les autres repères de position pour le point de départ, la destination et les points de cheminement sont toujours affichés sur la carte. Par exemple, un lieu de dépôt du service de partage de course ou de livraison est toujours affiché sur la carte, quel que soit l'état du trajet ou de la livraison.
Premiers pas avec le SDK JavaScript
Avant d'utiliser le SDK JavaScript, assurez-vous de savoir utiliser Fleet Engine et obtenir une clé API.
Pour suivre un trajet en VTC, commencez par créer une revendication d'ID de trajet.
Créer une revendication d'identifiant de voyage
Pour suivre un trajet à l'aide du fournisseur de localisation du trajet, créez un jeton Web JSON (JWT) avec une revendication d'ID de trajet.
Pour créer la charge utile JWT, ajoutez une revendication supplémentaire dans la section des autorisations avec la clé tripid et définissez sa valeur sur l'ID de trajet.
L'exemple suivant montre comment créer un jeton pour le suivi par ID de trajet:
{
"alg": "RS256",
"typ": "JWT",
"kid": "private_key_id_of_consumer_service_account"
}
.
{
"iss": "consumer@yourgcpproject.iam.gserviceaccount.com",
"sub": "consumer@yourgcpproject.iam.gserviceaccount.com",
"aud": "https://fleetengine.googleapis.com/",
"iat": 1511900000,
"exp": 1511903600,
"scope": "https://www.googleapis.com/auth/xapi",
"authorization": {
"tripid": "tid_12345",
}
}
Créer un outil de récupération des jetons d'authentification
Vous pouvez créer un outil de récupération de jetons d'authentification pour récupérer un jeton émis avec les revendications appropriées sur vos serveurs à l'aide d'un certificat de compte de service pour votre projet. Il est important de ne générer des jetons que sur vos serveurs et de ne jamais les partager sur aucun client. Sinon, vous compromettrez la sécurité de votre système.
L'extracteur doit renvoyer une structure de données comportant deux champs, entourés d'une promesse:
- Une chaîne
token
. - Un nombre
expiresInSeconds
. Un jeton expire dans ce délai après la récupération.
Le SDK client JavaScript demande un jeton via l'outil de récupération de jetons d'authentification lorsque l'une des conditions suivantes est remplie:
- Il ne possède pas de jeton valide, par exemple s'il n'a pas appelé l'extracteur lors d'un nouveau chargement de page ou s'il n'a pas renvoyé de jeton.
- Le jeton précédemment récupéré a expiré.
- Le jeton récupéré précédemment est dans la minute qui suit l'expiration.
Sinon, le SDK utilise le jeton toujours valide émis précédemment et n'appelle pas l'outil de récupération.
L'exemple suivant montre comment créer un outil de récupération de jetons d'authentification:
JavaScript
async 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.jwt,
expiresInSeconds: data.expirationTimestamp - Date.now(),
};
}
Lors de l'implémentation du point de terminaison côté serveur pour la génération des jetons, tenez compte des points suivants:
- Le point de terminaison doit renvoyer un délai d'expiration pour le jeton. Dans l'exemple ci-dessus, il est exprimé sous la forme
data.ExpiresInSeconds
. - L'outil de récupération des jetons d'authentification doit transmettre le délai d'expiration (en secondes, à partir du moment de la récupération) à la bibliothèque, comme illustré dans l'exemple.
- La valeur SERVER_TOKEN_URL dépend de la mise en œuvre de votre fournisseur. Voici les URL de l'exemple de fournisseur :
- https://
SERVER_URL
/token/driver/VEHICLEID
- https://
SERVER_URL
/token/consumer/TRIPID
- https://
Charger une carte à partir d'un fichier HTML
L'exemple suivant montre comment charger le SDK JavaScript à partir d'une URL spécifiée. Le paramètre de rappel exécute la fonction initMap
après le chargement de l'API. L'attribut defer permet au navigateur de continuer à afficher le reste de votre 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 trajet
Cette section explique comment utiliser le SDK JavaScript pour suivre un trajet en partage de course ou en livraison. Veillez à charger la bibliothèque à partir de la fonction de rappel spécifiée dans le tag de script avant d'exécuter votre code.
Instancier un fournisseur de localisation de trajet
Le SDK JavaScript prédéfinit un fournisseur de localisation pour l'API Ridesharing de Fleet Engine. Utilisez votre ID de projet et une référence à votre fabrique de jetons pour l'instancier.
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineTripLocationProvider({
projectId: 'your-project-id',
authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step
// Optionally, you may specify a trip ID to
// immediately start tracking.
tripId: 'your-trip-id',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineTripLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify a trip ID to
// immediately start tracking.
tripId: 'your-trip-id',
});
Initialiser la vue plan
Après avoir chargé le SDK JavaScript, initialisez la vue de la carte et ajoutez-la à la page HTML. Votre page doit contenir un élément <div> qui contient la vue plan. L'élément <div> est nommé map_canvas dans l'exemple ci-dessous.
Pour éviter les conditions de concurrence, définissez l'identifiant de trajet pour le fournisseur de localisation dans le rappel invoqué après l'initialisation de la carte.
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
// Styling customizations; see below.
vehicleMarkerCustomization: vehicleMarkerCustomization,
activePolylineCustomization: activePolylineCustomization,
// Any undefined styling options will use defaults.
});
// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.tripId = 'your-trip-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({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
// Styling customizations; see below.
vehicleMarkerCustomization: vehicleMarkerCustomization,
activePolylineCustomization: activePolylineCustomization,
// Any undefined styling options will use defaults.
});
// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
locationProvider.tripId = 'your-trip-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({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);
Écouter les événements de modification
Vous pouvez récupérer des méta-informations sur un trajet à partir de l'objet tâche à l'aide du fournisseur de localisation. Ces méta-informations incluent l'heure d'arrivée prévue et la distance restante avant le départ ou le dépôt. Les modifications apportées 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.trip contains data that may be useful
// to the rest of the UI.
console.log(e.trip.dropOffTime);
});
TypeScript
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
// e.trip contains data that may be useful
// to the rest of the UI.
console.log(e.trip.dropOffTime);
});
Gérer les erreurs
Les erreurs survenant de manière asynchrone lors de la demande d'informations sur le trajet déclenchent des é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 contains the error that triggered the
// event
console.error(e.error);
});
TypeScript
locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
// e.error contains the error that triggered the
// event
console.error(e.error);
});
Remarque:Veillez à encapsuler les appels de bibliothèque dans des blocs try...catch
pour gérer les erreurs imprévues.
Arrêter le suivi
Pour empêcher le fournisseur de localisation de suivre le trajet, supprimez l'ID de trajet du fournisseur de localisation.
JavaScript
locationProvider.tripId = '';
TypeScript
locationProvider.tripId = '';
Supprimer le fournisseur de position de la vue plan
L'exemple suivant montre comment supprimer un fournisseur de services de localisation de la vue plan.
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);
Personnaliser l'apparence de la carte de base
Pour personnaliser l'apparence du composant de carte, appliquez 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
Les styles de cartes basés dans le cloud vous permettent de créer et de modifier des styles de carte pour toutes les applications qui utilisent Google Maps à partir de 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. Pour appliquer un style à votre carte SDK JavaScript, spécifiez un mapId
et tout autre mapOptions
lorsque vous créez le JourneySharingMapView
. Le champ mapId
ne peut pas être modifié ni ajouté après l'instanciation de l'JourneySharingMapView
. L'exemple suivant 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'
}
// and any other styling options.
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// and any other styling options.
});
Utiliser les styles de carte basés sur du code
Une autre façon de personnaliser le style de la carte consiste à définir mapOptions
lorsque vous créez 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 les personnalisations de repère
Avec le SDK JavaScript, vous pouvez personnaliser l'apparence des repères ajoutés à la carte. Pour ce faire, spécifiez les personnalisations des repères, que le SDK JavaScript applique ensuite avant d'ajouter des repères à la carte et à chaque mise à jour de repère.
La personnalisation la plus simple consiste à spécifier un objet MarkerOptions
qui sera appliqué à tous les repères du même type. Les modifications spécifiées dans l'objet sont appliquées après la création de chaque repère, remplaçant toutes les options par défaut.
Une option plus avancée consiste à spécifier une fonction de personnalisation. Les fonctions de personnalisation permettent de styliser les repères en fonction des données et d'ajouter de l'interactivité aux repères, comme la gestion des clics. Plus précisément, Trip and Order progress (Progression du trajet et de la commande) transmet à la fonction de personnalisation les données relatives au type d'objet représenté par le repère: véhicule, point de départ, point de cheminement ou destination. Le style du repère peut alors changer en fonction de son état actuel (par exemple, le nombre de points de cheminement restants jusqu'à ce que le véhicule termine le trajet). Vous pouvez même effectuer une jointure avec des données provenant de sources extérieures à Fleet Engine et styliser le repère en fonction de ces informations.
Le SDK JavaScript fournit les paramètres de personnalisation suivants dans FleetEngineTripLocationProviderOptions
:
vehicleMarkerCustomization
originMarkerCustomization
waypointMarkerCustomization
destinationMarkerCustomization
Modifier le style des repères avec MarkerOptions
L'exemple suivant montre comment configurer le style d'un repère de véhicule avec un objet MarkerOptions
. Suivez ce schéma pour personnaliser le style d'un repère à l'aide des personnalisations de repère énumérées précédemment.
JavaScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
Modifier le style des repères à l'aide des fonctions de personnalisation
L'exemple suivant montre comment configurer le style d'un repère de véhicule. Suivez ce modèle pour personnaliser le style d'un repère à l'aide de l'un des paramètres de personnalisation de repère énumérés précédemment.
JavaScript
vehicleMarkerCustomization =
(params) => {
var distance = params.trip.remainingWaypoints.length;
params.marker.setLabel(`${distance}`);
};
TypeScript
vehicleMarkerCustomization =
(params: TripMarkerCustomizationFunctionParams) => {
const distance = params.trip.remainingWaypoints.length;
params.marker.setLabel(`${distance}`);
};
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 ce modèle pour ajouter la gestion des clics à n'importe quel repère à l'aide de l'un des paramètres de personnalisation de repère énumérés précédemment.
JavaScript
vehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
vehicleMarkerCustomization =
(params: TripMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
Utiliser les personnalisations de polylignes
Avec le SDK JavaScript, vous pouvez également personnaliser l'apparence de l'itinéraire sur la carte. La bibliothèque crée un objet google.maps.Polyline
pour chaque paire de coordonnées dans le trajet actif ou restant du véhicule.
Vous pouvez appliquer un style aux objets Polyline
en personnalisant les polylignes. La bibliothèque applique ensuite ces personnalisations dans deux situations: avant d'ajouter les objets à la carte et lorsque les données utilisées pour les objets ont changé.
Comme pour la personnalisation des repères, vous pouvez spécifier un ensemble de PolylineOptions
à appliquer à tous les objets Polyline
correspondants lors de leur création ou de leur mise à jour.
De même, vous pouvez spécifier une fonction de personnalisation. Les 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 de l'état actuel du véhicule (par exemple, en colorant l'objet Polyline
d'une nuance plus profonde ou en l'épaississant lorsque le véhicule ralentit). Vous pouvez même effectuer une jointure depuis des sources extérieures à Fleet Engine et styliser l'objet Polyline
en fonction de ces informations.
Vous pouvez spécifier les personnalisations à l'aide des paramètres fournis dans FleetEngineTripLocationProviderOptions
.
Vous pouvez personnaliser les différents états du trajet du véhicule (déjà emprunté, en cours de route ou pas encore). Les paramètres sont les suivants:
takenPolylineCustomization
, pour un chemin déjà parcouruactivePolylineCustomization
, pour un parcours actifremainingPolylineCustomization
, pour un parcours 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 modèle pour personnaliser le style de n'importe quel objet Polyline
à l'aide de l'une 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'un objet Polyline
actif. Suivez ce modèle pour personnaliser le style de n'importe quel objet Polyline
à l'aide de l'un des paramètres de personnalisation de polyligne énumérés précédemment.
JavaScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.trip.remainingWaypoints[0].distanceMeters;
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: TripPolylineCustomizationFunctionParams) => {
const distance = params.trip.remainingWaypoints[0].distanceMeters;
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. Pour rendre un objet Polyline
invisible, définissez sa propriété visible
:
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
Afficher les objets Polyline
sensibles au trafic
Fleet Engine renvoie des données sur la vitesse du trafic pour les trajets actifs et restants du véhicule suivi. Vous pouvez utiliser ces informations pour appliquer un style aux objets Polyline
en fonction de leurs vitesses de trafic:
JavaScript
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
FleetEngineTripLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;
// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
(params) => {
FleetEngineTripLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
for (const polylineObject of params.polylines) {
if (polylineObject.get('strokeColor') === '#05f') {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
TypeScript
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
FleetEngineTripLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;
// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
(params: TripPolylineCustomizationFunctionParams) => {
FleetEngineTripLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
for (const polylineObject of params.polylines) {
if (polylineObject.get('strokeColor') === '#05f') {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
Afficher une 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 un InfoWindow
et l'associer à un repère de véhicule:
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', e => {
const stopsCount = e.trip.remainingWaypoints.length;
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.FleetEngineTripLocationProviderUpdateEvent) => {
const stopsCount = e.trip.remainingWaypoints.length;
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();
Désactiver l'ajustement automatique
Vous pouvez empêcher la carte d'ajuster automatiquement la fenêtre d'affichage au véhicule et à l'itinéraire anticipé en désactivant l'ajustement automatique. L'exemple suivant montre comment désactiver l'ajustement automatique lorsque vous configurez la vue de progression du trajet et de l'ordre.
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 utiliser le SDK JavaScript pour remplacer une carte existante qui inclut des repères ou d'autres personnalisations sans les perdre.
Par exemple, supposons que vous ayez une page Web avec une entité google.maps.Map
standard 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, centered at Uluru
var map = new google.maps.Map(document.getElementById('map'));
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, 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 le SDK JavaScript:
- Ajoutez le code de la fabrique de jetons d'authentification.
- Initialisez un fournisseur de localisation dans la fonction
initMap()
. - Initialisez la vue plan 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 la carte.
- Ajoutez la bibliothèque de localisation 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
async 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.
locationProvider = new google.maps.journeySharing.FleetEngineTripLocationProvider({
projectId: "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
});
locationProvider.tripId = TRIP_ID;
// (4) Add customizations like before.
// The location of Uluru
var uluru = {lat: -25.344, lng: 131.036};
// The map, centered at Uluru
var map = mapView.map;
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, 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 SDK to the API loader.
-->
<script defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
</script>
</body>
</html>
Si vous effectuez un trajet avec l'ID spécifié près d'Uluru, il s'affichera désormais sur la carte.