Lorsque vous partagez un parcours, votre application grand public affiche la position véhicule approprié pour le consommateur. Pour ce faire, votre application doit commencer à partager le parcours, de mettre à jour sa progression et de ne plus partager parcours une fois le trajet terminé.
Ce document décrit les principales étapes de ce processus:
- Configurer une carte
- Initialiser une carte et afficher le parcours partagé
- Mettre à jour et suivre la progression
- Arrêter le partage du trajet
- Gérer les erreurs de partage de parcours
Configurer une carte
Pour suivre un retrait ou une livraison dans votre application Web, vous devez charger une carte et instanciez le SDK consommateur pour commencer à suivre votre parcours. Vous pouvez charger soit créer une carte, soit utiliser une carte existante. Vous utiliserez ensuite le schéma pour instancier le SDK grand public afin que la vue de carte corresponde au l'emplacement de l'article suivi.
Charger une nouvelle carte à l'aide de l'API Google Maps JavaScript
Pour créer une carte, chargez l'API Google Maps JavaScript dans votre application Web. La l'exemple suivant montre comment charger l'API Google Maps JavaScript, activer SDK et déclencher le contrôle d'initialisation.
- Le paramètre
callbackexécute la fonctioninitMapaprès le chargement de l'API. - L'attribut
deferpermet au navigateur de continuer à afficher le reste de vos pendant le chargement de l'API.
Utilisez la fonction initMap pour instancier le SDK Consumer SDK. Exemple :
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
Charger une carte existante
Vous pouvez également charger une carte existante créée par l'API Google Maps JavaScript, comme celui que vous utilisez déjà.
Par exemple, supposons que vous ayez une page Web avec un google.maps.Map standard
entité sur laquelle un marqueur est affiché, comme défini dans le code HTML suivant. Ce
affiche votre carte à l'aide de la même fonction initMap dans le rappel à la fin:
<!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 Pier 39 in San Francisco
var pier39 = {lat: 37.809326, lng: -122.409981};
// 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 Pier 39
var marker = new google.maps.Marker({position: pier39, map: map});
}
</script>
<!-- Load the API from the specified URL.
* The defer attribute allows the browser to render the page while the API loads.
* The key parameter contains your own API key.
* 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>
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, si l'une de vos pages Web comporte un google.maps.Map standard
sur laquelle un repère est affiché, vous pouvez remplacer la carte et conserver
le repère. Cette section décrit la procédure à suivre.
Pour remplacer la carte et conserver ses personnalisations, ajoutez le partage de parcours à votre page HTML en suivant ces étapes, également numérotées dans l'exemple ce qui suit:
Ajoutez du code pour la fabrique de jetons d'authentification.
Initialisez un fournisseur de localisation dans la fonction
initMap().Initialisez la vue de la carte dans la fonction
initMap(). La vue contient sur la carte.Déplacez votre personnalisation dans la fonction de rappel de la vue plan l'initialisation.
Ajoutez la bibliothèque d'emplacements au chargeur d'API.
L'exemple suivant montre les modifications à apporter. Si vous effectuez un trajet avec l'ID spécifié près d'Uluru, il s'affiche désormais sur la carte:
<!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 Pier 39 in San Francisco
var pier39 = {lat: 37.809326, lng: -122.409981};
// 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 Pier 39
var marker = new google.maps.Marker({position: pier39, 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>
Initialiser une carte et afficher le parcours partagé
Lorsqu'un trajet commence, votre application doit instancier un fournisseur de localisation du trajet puis initialisez une carte pour commencer à partager votre parcours. Consultez les sections suivantes pour obtenir des exemples.
Instancier un fournisseur de localisation de trajet
Le SDK JavaScript inclut un fournisseur de localisation prédéfini pour l'API de partage de course Fleet Engine. Utilisez l'ID de votre 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: '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',
});
Initialiser la vue plan
Après avoir chargé le SDK JavaScript, initialisez
la vue plan et de l'ajouter à la page HTML. Votre page doit contenir
Un élément <div> qui contient la vue plan. L'élément <div>
est nommée map_canvas dans l'exemple suivant.
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 trip ID in the location
// provider constructor, you may do so here.
// Location tracking starts 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 choose.
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.
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// 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 starts 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 choose.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);
Mettre à jour et suivre la progression
Votre application doit écouter les événements et actualiser la progression en tant que parcours progresse. Vous pouvez récupérer des méta-informations sur un trajet à partir de l'objet de tâche à 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 prise en charge ou le dépose. Modifications apportées aux méta-informations déclencher un événement update. L'exemple suivant montre comment écouter ces les é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);
});
Arrêter le partage du trajet
Une fois le trajet terminé, vous devez empêcher le fournisseur de géolocalisation de suivre voyage. Pour ce faire, supprimez l'identifiant du trajet et un fournisseur de services de localisation. Consultez les sections suivantes pour obtenir des exemples.
Supprimer l'ID du trajet du fournisseur de localisation
L'exemple suivant montre comment supprimer un ID de trajet du fournisseur de localisation.
JavaScript
locationProvider.tripId = '';
TypeScript
locationProvider.tripId = '';
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);
Gérer les erreurs de partage de parcours
Erreurs générées de manière asynchrone en demandant un déclencheur d'informations sur le trajet les événements d'erreur. L'exemple suivant montre comment écouter ces événements pour 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);
});