Last Mile Fleet Solution n'est actuellement disponible que pour certains clients. Contactez le service commercial pour en savoir plus.

Suivez votre parc avec la bibliothèque de suivi du parc JavaScript

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

La bibliothèque de suivi du parc JavaScript vous permet de visualiser la position des véhicules de leur parc quasiment en temps réel. La bibliothèque utilise l'API Deliveries pour permettre la visualisation des véhicules de livraison et des tâches. Tout comme la bibliothèque de suivi des envois JavaScript, elle contient un composant de carte JavaScript qui remplace directement une entité google.maps.Map et des composants de données standards à connecter à Fleet Engine.

Composants

La bibliothèque de suivi du parc JavaScript fournit des composants permettant de visualiser les véhicules de livraison et les arrêts, ainsi que des flux de données brutes pour l'heure d'arrivée prévue ou la distance restante jusqu'à une livraison.

Vue Plan de Fleet Tracking

Le composant "Plan de suivi du parc" permet de visualiser la position des véhicules et des tâches. Si l'itinéraire d'un véhicule est connu, le composant "Plan" anime ce véhicule à mesure qu'il se déplace.

Exemple de vue plan de suivi de parc

Fournisseurs de services de localisation

Les fournisseurs d'emplacements utilisent des informations stockées dans Fleet Engine pour envoyer des informations de localisation aux objets suivis dans la carte de partage de parcours.

Fournisseur de services de localisation de véhicules de livraison

Le fournisseur de l'emplacement du véhicule de livraison affiche les informations sur son emplacement. Il contient des informations sur la position du véhicule ainsi que sur les tâches effectuées par le véhicule de livraison.

Fournisseur d'emplacements du parc de livraison

Le fournisseur d'emplacements du parc de livraison affiche les informations de localisation de plusieurs véhicules. Vous pouvez filtrer des véhicules ou des emplacements spécifiques, ou afficher l'ensemble du parc.

Contrôler la visibilité des lieux suivis

Cette section décrit les règles de visibilité pour les objets de localisation suivis sur la carte pour le fournisseur d'emplacements prédéfini Fleet Engine. Les fournisseurs d'emplacements personnalisés ou dérivés peuvent modifier les règles de visibilité.

Véhicules de livraison

Un véhicule de livraison est visible dès sa création dans Fleet Engine, et reste visible tout au long de son itinéraire, quelles que soient ses tâches.

Repères de position des tâches

Les arrêts de véhicules planifiés sont affichés sur la carte en tant que repères d'arrêts de véhicules. Les repères des tâches terminées s'affichent dans un style différent des arrêts planifiés d'un véhicule.

L'emplacement des résultats de la tâche est affiché à l'aide de repères. Les tâches dont le résultat est SUCCEEDED s'affichent avec des repères de tâches réussis, tandis que toutes les autres tâches sont affichées avec des repères de tâches infructueux.

Premiers pas avec la bibliothèque de suivi du parc JavaScript

Avant d'utiliser la bibliothèque de suivi de parc JavaScript, assurez-vous de bien connaître 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 d'emplacement des véhicules de livraison, créez 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 d'autorisation avec les clés taskid et deliveryvehicleid, et définissez la valeur de chaque clé sur *. Le jeton doit être créé à l'aide du rôle Cloud IAM Fleet Engine Service Super User. Notez que cela accorde un accès étendu pour créer, lire et modifier des entités Fleet Engine, et ne doit être partagé qu'avec des utilisateurs de confiance.

L'exemple suivant montre comment créer un jeton pour le suivi par véhicule et par 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 de jetons d'authentification afin de récupérer un jeton attribué 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 que des jetons sur vos serveurs et de ne jamais partager vos certificats sur des clients. Sinon, vous risquez de compromettre la sécurité de votre système.

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.ExpiresInSeconds
  };
}

Lors de l'implémentation du point de terminaison côté serveur pour l'extraction 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 indiqué sous la forme data.ExpiresInSeconds.
    • L'outil de récupération des jetons d'authentification doit transmettre le délai d'expiration (en secondes) à la bibliothèque, comme illustré dans l'exemple.

Charger une carte depuis HTML

L'exemple suivant montre comment charger la bibliothèque de partage de parcours JavaScript à partir d'une URL spécifiée. Le paramètre callback 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. Notez que le paramètre v=beta doit être spécifié.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&callback=initMap&libraries=journeySharing" defer></script>

Suivre un véhicule de livraison

Cette section explique comment utiliser la bibliothèque de suivi du parc JavaScript pour suivre un véhicule de 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 services de localisation de véhicules de livraison

La bibliothèque de suivi de parc JavaScript prédéfinit un fournisseur d'emplacements 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 de partage de parcours JavaScript, initialisez la vue plan et ajoutez-la à la page HTML. Votre page doit contenir un élément <div> qui contient la vue plan. Dans l'exemple ci-dessous, l'élément <div> est nommé map_canvas.

JavaScript

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'), 
  locationProvider: 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'),
  locationProvider: 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 d'emplacements. Les méta-informations incluent l'heure d'arrivée prévue et la distance restante avant le prochain retrait ou dépose du véhicule. Les modifications apportées aux métadonnées génèrent 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

Les erreurs qui surviennent de manière asynchrone lors de la demande d'informations sur le véhicule de livraison 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 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);
});

Afficher un parc de livraison

Cette section explique comment utiliser la bibliothèque de partage de parcours JavaScript pour afficher un parc de 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 parcs de livraisons

La bibliothèque de suivi de parc JavaScript prédéfinit un fournisseur d'emplacements qui récupère plusieurs véhicules à partir de l'API FleetEngine Deliveries. Utilisez votre ID de 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 la carte. Ce filtre est directement transmis à Fleet Engine. Consultez ListDeliveryVehiclesRequest.filter pour connaître les formats acceptés.

locationRestriction limite la zone dans laquelle les véhicules sont affichés sur la carte. Il détermine également si le suivi de la position est activé ou non. Le suivi de la position ne démarrera pas tant que ce paramètre n'aura pas été défini.

Une fois le fournisseur d'établissements créé, initialisez 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 dans la vue plan.

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 l'objet deliveryVehicles à l'aide du fournisseur d'emplacements. Les métadonnées incluent les propriétés du véhicule, telles que l'état de navigation, la distance restante et les attributs personnalisés. Pour en savoir plus, consultez la documentation de référence. La modification des métadonnées entraîne un événement update. 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

Les erreurs qui surviennent de manière asynchrone lors de la demande d'informations sur le parc de livraison déclenchent des événements d'erreur. Pour obtenir des exemples illustrant comment écouter ces événements, consultez Rechercher les erreurs.

Personnaliser l'apparence de la carte de base

Pour personnaliser l'apparence du composant Maps, stylisez votre carte à l'aide d'outils cloud ou en définissant des options directement dans le code.

Utiliser la personnalisation de cartes dans Google Cloud

La personnalisation de cartes dans Google Cloud vous permet de créer et de modifier des styles de carte pour toutes vos 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 de suivi de parc JavaScript, spécifiez un mapId lorsque vous créez le JourneySharingMapView. Le champ mapId ne peut pas être modifié ni ajouté après l'instanciation de 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'),
  locationProvider: locationProvider,
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProvider: locationProvider,
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
});

Utiliser des styles de carte basés sur du code

Une autre façon de personnaliser le style de carte consiste à définir mapOptions lorsque vous créez le JourneySharingMapView.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProvider: locationProvider,
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProvider: locationProvider,
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

Personnaliser l'apparence des objets de localisation suivis

Cette section explique comment personnaliser l'apparence des objets de localisation suivis, tels que les itinéraires, les véhicules et les arrêts.

Modifier le style et la visibilité des itinéraires

Pour configurer le style et la visibilité des routes empruntées et attendues, utilisez des options de style personnalisées. Pour en savoir plus, consultez la section Interface PolylineOptions.

L'exemple suivant montre comment configurer le style et la visibilité des routes prévues. Pour configurer le style et la visibilité des routes empruntées, utilisez takenRoutePolylineSetup au lieu de anticipatedRoutePolylineSetup.

JavaScript

// This function is specified in the 
// JourneySharingMapView constructor's options 
// parameter.
function anticipatedRoutePolylineSetup({
    defaultPolylineOptions, defaultVisible}) {
  // If this function is not specified, the 
  // PolylineOptions object contained in 
  // defaultPolylineOptions is used to render the
  // anticipated route polyline. visible property sets the
  // polyline's visibility. Modify this object and 
  // pass it back to customize the style of the map.
  defaultPolylineOptions.strokeOpacity = 0.5;
  defaultPolylineOptions.strokeColor = 'red';
  return {
    polylineOptions: defaultPolylineOptions,
    visible: true
  };
}

// As an alternative, set static PolylineOptions to
// use for the anticipated route.
const anticipatedRoutePolylineOptionsSetup = {
  polylineOptions: {
    strokeOpacity: 0.5,
    strokeColor: 'red',
    …
  },
  visible: true,
};

TypeScript

// This function is specified in the 
// JourneySharingMapView constructor's options 
// parameter.
function anticipatedRoutePolylineSetup(options: {
  defaultPolylineOptions: google.maps.PolylineOptions,
  visible: boolean,
}): {
  polylineOptions: google.maps.PolylineOptions,
  visible: boolean,
} {
  // If this function is not specified, the 
  // PolylineOptions object contained in 
  // defaultPolylineOptions is used to render the
  // anticipated route polyline. visible property sets the
  // polyline's visibility. Modify this object and 
  // pass it back to customize the style of the map.
  options.defaultPolylineOptions.strokeOpacity = 0.5;
  options.defaultPolylineOptions.strokeColor = 'red';
  return {
    polylineOptions: options.defaultPolylineOptions,
    visible: true
  };
}

// As an alternative, set static PolylineOptions to
// use for the anticipated route.
const anticipatedRoutePolylineSetup = {
  polylineOptions: {
    strokeOpacity: 0.5,
    strokeColor: 'red',
    …
  },
  visible: true,
};

Modifier le style et les icônes des repères de véhicules

Faites appel à des fournisseurs de styles personnalisés pour configurer le style et l'icône utilisés pour représenter un véhicule. L'exemple suivant montre comment configurer le style et l'icône d'un repère de véhicule.

JavaScript

// This function is specified in the 
// JourneySharingMapView constructor's options 
// parameter.
function vehicleMarkerSetup({defaultMarkerOptions}) {
  // If this function is not specified, the 
  // MarkerOptions object contained in 
  // defaultMarkerOptions is used to render the
  // vehicle marker. Modify this object and pass it
  // back to customize the style of the map.
  defaultMarkerOptions.opacity = 0.5;
  defaultMarkerOptions.icon = MY_ICON;
  return {markerOptions: defaultMarkerOptions};
}

// As an alternative, set static MarkerOptions to use
// for the vehicle marker:
const vehicleMarkerSetup = {
  markerOptions: {
    opacity: 0.5,
    icon: MY_ICON,
    ...
}};

TypeScript

// This function is specified in the 
// JourneySharingMapView constructor's options 
// parameter.
function vehicleMarkerSetup(options: {
  defaultMarkerOptions: google.maps.MarkerOptions,
}): {markerOptions: google.maps.MarkerOptions} {
  // If this function is not specified, the 
  // MarkerOptions object contained in 
  // defaultMarkerOptions is used to render the
  // vehicle marker. Modify this object and pass it
  // back to customize the style of the map.
  options.defaultMarkerOptions.opacity = 0.5;
  options.defaultMarkerOptions.icon = MY_ICON;
  return {
    markerOptions: options.defaultMarkerOptions,
  };
}

// As an alternative, set static MarkerOptions to use
// for the vehicle marker:
vehicleMarkerSetup = {
  markerOptions: {
    opacity: 0.5,
    icon: MY_ICON,
    ...
}};

Modifier les icônes d'arrêt du véhicule (arrêts planifiés)

Vous pouvez utiliser des options de style personnalisées pour configurer l'icône représentant les arrêts des véhicules à finaliser. Les options de style sont définies et associées à la vue plan de la même manière que la modification des icônes des repères de véhicules.

L'exemple suivant montre comment configurer l'icône des emplacements des véhicules.

JavaScript

// This function is specified in the 
// JourneySharingMapView constructor's options 
// parameter.
function waypointMarkerSetup({defaultMarkerOptions}) {
  // If this function is not specified, the 
  // MarkerOptions object contained in 
  // defaultMarkerOptions is used to render the
  // origin marker. Modify this object and pass it
  // back to customize the style of the map.
  defaultMarkerOptions.opacity = 0.5;
  defaultMarkerOptions.icon = MY_ICON;
  return {markerOptions: defaultMarkerOptions};
}

// As an alternative, set a static MarkerOptions to use
// for successful task markers:
const successfulTaskMarkerSetup = {
  markerOptions: {
    opacity: 0.5,
    icon: MY_ICON,
    ...
}};

TypeScript

// This function is specified in the 
// JourneySharingMapView constructor's options 
// parameter.
function waypointMarkerSetup(options: {
  defaultMarkerOptions: google.maps.MarkerOptions,
}): {markerOptions: google.maps.MarkerOptions} {
  // If this function is not specified, the 
  // MarkerOptions object contained in 
  // defaultMarkerOptions is used to render the
  // origin marker. Modify this object and pass it
  // back to customize the style of the map.
  options.defaultMarkerOptions.opacity = 0.5;
  options.defaultMarkerOptions.icon = MY_ICON;
  return {
    markerOptions: options.defaultMarkerOptions,
  };
}

// As an alternative, set a static MarkerOptions to use
// for successful task markers:
successfulTaskMarkerSetup = {
  markerOptions: {
    opacity: 0.5,
    icon: MY_ICON,
    ...
}};

Ajouter des commandes d'affichage satellite à la carte

L'entité google.maps.Map inclut des commandes que les utilisateurs peuvent modifier directement. Votre carte peut être personnalisée pour inclure des commandes qui activent la vue satellite et d'autres types de carte.

L'exemple suivant montre comment ajouter des commandes de vue satellite à la vue plan.

JavaScript

// 1. Create a MapView as described above.
this.mapView = new MapView(mapViewOptions);

// 2. Set more options to this mapView.
this.mapView.map.setOptions({
      mapTypeControl: true,
      mapTypeControlOptions: {
         mapTypeIds:    
             [google.maps.MapTypeId.SATELLITE,         
              google.maps.MapTypeId.ROADMAP]
      }
});

TypeScript

// 1. Create a MapView as described above.
this.mapView = new MapView(mapViewOptions);

// 2. Set more options to this mapView.
this.mapView.map.setOptions({
      mapTypeControl: true,
      mapTypeControlOptions: {
         mapTypeIds:    
             [google.maps.MapTypeId.SATELLITE,         
              google.maps.MapTypeId.ROADMAP]
      }
});

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 un InfoWindow et l'associer au repère d'un 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 l'ajustement automatique de la fenêtre d'affichage de la carte au véhicule et à l'itinéraire prévu en désactivant l'ajustement automatique. L'exemple suivant montre comment désactiver l'ajustement automatique lorsque vous configurez la vue de partage de trajet sur la carte.

JavaScript

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'), 
  locationProvider: locationProvider,
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

TypeScript

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'), 
  locationProvider: 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 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, 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 de partage de parcours JavaScript, qui inclut le suivi du parc:

  1. Ajoutez du code pour la fabrique de jetons d'authentification.
  2. Initialisez un fournisseur d'emplacements dans la fonction initMap().
  3. Initialisez la vue plan dans la fonction initMap(). La vue contient la carte.
  4. Déplacez votre personnalisation dans la fonction de rappel pour l'initialisation de la vue plan.
  5. 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'), 
    locationProvider: 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 exploitez un véhicule de livraison avec l'ID spécifié à proximité d'Uluru, il s'affiche désormais sur la carte.