Realiza un seguimiento de tu flota con la biblioteca de seguimiento de la flota de JavaScript

La biblioteca de seguimiento de flotas de JavaScript te permite visualizar las ubicaciones de los vehículos de tus flotas casi en tiempo real. La biblioteca usa el módulo On Demand Viajes y entregas API para permitir la visualización de vehículos y viajes. La flota de JavaScript La biblioteca de seguimiento contiene un componente de mapa de JavaScript que es reemplazo de una entidad google.maps.Map estándar y componentes de datos para conectarse con Fleet Engine.

Componentes

La Biblioteca de seguimiento de flotas de JavaScript proporciona componentes para la visualización de vehículos y puntos de referencia de viajes, así como feeds de datos sin procesar para ETA o restantes a un viaje.

Vista de mapa de seguimiento de flota

El componente de vista de mapa de seguimiento de flota visualiza la ubicación de los vehículos y los puntos de referencia del viaje. Si se conoce la ruta de un vehículo, el componente de vista de mapa anima a ese vehículo a medida que se mueve por su ruta prevista.

Vista de mapa de seguimiento de flota ejemplo

Proveedores de ubicación

Los proveedores de ubicación trabajan con información almacenada en Fleet Engine para enviar ubicaciones de los objetos rastreados en el mapa de recorrido compartido.

Proveedor de ubicación de vehículos

El proveedor de ubicación de vehículos muestra la información de ubicación de un solo vehículo. Tiene información sobre la ubicación del vehículo y el viaje actual asignado al vehículo.

Proveedor de ubicación de flotas

El proveedor de ubicación de la flota muestra la información de ubicación de varios vehículos. Puedes filtrar para mostrar un vehículo específico y su ubicación, mostrar las ubicaciones de los vehículos de toda la flota.

Controla la visibilidad de las ubicaciones que sigues

Las reglas de visibilidad determinan cuándo un objeto de ubicación rastreado es visible en el mapa. para un proveedor de ubicación de Fleet Engine. Nota: Uso de una ubicación personalizada o derivada de servicios pueden cambiar las reglas de visibilidad.

Vehículos

Un vehículo es visible apenas se crea en Fleet Engine cuando el estado del vehículo es Online. Esto significa que un vehículo puede ser visible incluso cuando no hay un viaje actual asignado al vehículo.

Marcadores de ubicación de puntos de referencia

Un marcador de ubicación de punto de referencia indica los puntos a lo largo del recorrido de un vehículo con el origen y terminar con el destino final. La ubicación del punto de referencia Los marcadores pueden definirse de la siguiente manera:

  • Origin: Indica la ubicación de partida del viaje en vehículo.
  • Intermedio: Indica las paradas en el viaje en vehículo.
  • Destino: Indica la ubicación final del viaje en vehículo.

Los puntos de referencia para vehículos planificados se muestran en el mapa como origen, intermedio e marcadores de destino.

Comienza a usar la biblioteca de seguimiento de flotas de JavaScript

Antes de usar la Biblioteca de seguimiento de flotas de JavaScript, asegúrate de conocer con Fleet Engine y con obtener una API . Luego, crea un reclamo de ID de viaje y de ID de vehículo.

Crea un reclamo de ID de viaje y de ID de vehículo

Para realizar un seguimiento de los vehículos con la ubicación del vehículo proveedor, crea un token web JSON (JWT) con un viaje Reclamo de ID y de ID de vehículo.

Para crear la carga útil de JWT, agrega una reclamación adicional en la sección de autorización con las claves tripid y vehicleid, y establece el value de cada clave en *. El token se debe crear con la nube de superusuario del servicio de Flet Engine. de IAM. Ten en cuenta que esto otorga un acceso amplio para crear, leer y modificar la flota. de Compute Engine y solo debe compartirse con usuarios de confianza.

En el siguiente ejemplo, se muestra cómo crear un token para hacer un seguimiento por vehículo y tarea:

{
  "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": {
    "tripid": "*",
    "vehicleid": "*",
  }
}

Crea un recuperador de tokens de autenticación

La biblioteca de seguimiento de flotas de JavaScript solicita un token con el método Recuperador de tokens cuando se cumple alguna de las siguientes condiciones:

  • No tiene un token válido, como cuando no llamó a la herramienta de recuperación en una nueva carga de página o cuando el recuperador no ha regresado con un token.
  • El token que recuperó ya venció.
  • El token que recuperó está en el plazo de un minuto a partir de su vencimiento.

De lo contrario, la biblioteca utiliza el token válido que se emitió anteriormente y hace lo siguiente: no llames al recuperador.

Puedes crear un recuperador de tokens de autenticación para recuperar un token creado con los reclamos adecuados en tus servidores usando una cuenta de servicio certificado para tu proyecto. Es importante que solo crees tokens en tu de Google y nunca compartir los certificados con ningún cliente. De lo contrario, puedes puede comprometer la seguridad de tu sistema.

El recuperador debe devolver un data estructura con dos campos, dentro de una promesa:

  • Una cadena token
  • Un número expiresInSeconds. Un token vence en este período y recuperar datos.

En el siguiente ejemplo, se muestra cómo crear un recuperador de token de autenticación:

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(),
  };
}

Cuando implementes el extremo del servidor para acuñar los tokens, conserva el lo siguiente:

  • El extremo debe mostrar una hora de vencimiento para el token. en el ejemplo anterior, se da como data.ExpiresInSeconds.
  • El recuperador de tokens de autenticación debe pasar la hora de vencimiento (en segundos, desde (hora de recuperación) a la biblioteca, como se muestra en el ejemplo.
  • La SERVER_TOKEN_URL depende de la implementación de tu backend, estas son URL de ejemplo:
    • https://SERVER_URL/token/driver/VEHICLE_ID
    • https://SERVER_URL/token/consumer/TRIP_ID
    • https://SERVER_URL/token/fleet_reader

Cómo cargar un mapa desde HTML

En el siguiente ejemplo, se muestra cómo cargar la biblioteca de JavaScript Journey Share de una URL especificada. El parámetro devolución de llamada ejecuta la función initMap. después de que se carga la API. El atributo defer permite que el navegador continúe renderizando el resto de la página mientras se carga la API.

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

Sigue a un vehículo

En esta sección, se muestra cómo usar la biblioteca de seguimiento de flotas de JavaScript para seguir un vehículo. Asegúrate de cargar la biblioteca desde la función de devolución de llamada especificada en la etiqueta de la secuencia de comandos antes de ejecutar el código.

Crea una instancia de proveedor de ubicación de vehículos

La biblioteca JavaScript de seguimiento de flotas predefine un proveedor de ubicación para la función On. API de Demand Rides and Deliveries. Usa el ID del proyecto y una referencia al la fábrica de tokens para crear una instancia.

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

Cómo inicializar la vista de mapa

Después de cargar la biblioteca de JavaScript Journey Share, inicializa la vista de mapa. y agregarla a la página HTML. Tu página debe contener un elemento &lt;div&gt; que muestra la vista de mapa. El elemento &lt;div&gt; se llama &lt;div&gt; en el ejemplo a continuación.

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 vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
                        = 'your-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.
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId = 'your-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);

Cómo escuchar eventos de cambio

Puedes recuperar información meta sobre un vehículo desde el objeto vehicle. usando el proveedor de ubicación. La metainformación incluye la hora de llegada estimada y los datos distancia antes del próximo punto de partida o destino del vehículo. Cambios en la meta activa un evento update. En el siguiente ejemplo, se muestra cómo escuchar a estos eventos de cambio.

JavaScript

locationProvider.addListener('update', e => {
  // e.vehicle contains data that may be
  // useful to the rest of the UI.
  if (e.vehicle) {
    console.log(e.vehicle.vehicleState);
  }
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  // e.vehicle contains data that may be useful to the rest of the UI.
  if (e.vehicle) {
    console.log(e.vehicle.vehicleState);
  }
});

Detecta errores

Errores que surgen de forma asíncrona al solicitar información del vehículo los eventos de error. En el siguiente ejemplo, se muestra cómo escuchar estos eventos en para manejar los errores.

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);
});

Detener el seguimiento

Para evitar que el proveedor de ubicación realice el seguimiento del vehículo, quita el ID del vehículo del proveedor de ubicación.

JavaScript

locationProvider.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

Quitar el proveedor de ubicación de la vista de mapa

En el siguiente ejemplo, se muestra cómo quitar un proveedor de ubicación de la vista de mapa.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Ver una flota de vehículos

En esta sección, se muestra cómo usar la biblioteca de JavaScript Journey Share para ver un de la flota de vehículos. Asegúrate de cargar la biblioteca desde la función de devolución de llamada que se especifica en la etiqueta de la secuencia de comandos antes de ejecutar el código.

Crea una instancia de un proveedor de ubicación de flota de vehículos

La biblioteca de seguimiento de flotas de JavaScript define previamente un proveedor de ubicación que Recupera varios vehículos de la API de On Demand Rides and Deliveries. Usa tu el ID del proyecto y una referencia a tu recuperador de tokens para crear una instancia.

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which 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 vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which 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 vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

vehicleFilter especifica una consulta que se usa para filtrar los vehículos que se muestran en el mapa. Este filtro se pasa directamente a Fleet Engine. Consulta ListVehiclesRequest para conocer los formatos compatibles.

locationRestriction limita el área en la que se muestran los vehículos en el mapa. También controla si el seguimiento de la ubicación está activo o no. Seguimiento de ubicación no comenzará hasta que se establezca.

Una vez creado el proveedor de ubicación, inicializa el mapa. vista.

Cómo establecer una restricción de ubicación con el viewport del mapa

Los límites de locationRestriction se pueden configurar para que coincidan con el área visible en la vista de mapa.

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;
    }
  });

Cómo escuchar eventos de cambio

Puedes recuperar información meta sobre la flota del objeto vehicles. usando el proveedor de ubicación. La metainformación incluye las propiedades del vehículo como el estado de la navegación, la distancia al próximo punto de referencia y los atributos personalizados; ver referencia documentación para obtener más información. Los cambios en la metainformación activan un evento de actualización. El En el siguiente ejemplo, se muestra cómo escuchar estos eventos de cambio.

JavaScript

locationProvider.addListener('update', e => {
  // e.vehicles contains data that may be
  // useful to the rest of the UI.
  if (e.vehicles) {
    for (vehicle of e.vehicles) {
      console.log(vehicle.navigationStatus);
    }
  }
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineFleetLocationProviderUpdateEvent) => {
  // e.vehicles contains data that may be useful to the rest of the UI.
  if (e.vehicles) {
    for (vehicle of e.vehicles) {
      console.log(vehicle.navigationStatus);
    }
  }
});

Detecta errores

Errores que surgen de forma asíncrona al solicitar información de la flota de vehículos pueden activar eventos de errores. Para ver ejemplos sobre cómo escuchar estos eventos, consulte para detectar errores,

Detener el seguimiento

Para evitar que el proveedor de ubicación realice el seguimiento de la flota, establece los límites de la del proveedor de ubicación a un valor nulo.

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

Quitar el proveedor de ubicación de la vista de mapa

En el siguiente ejemplo, se muestra cómo quitar un proveedor de ubicación de la vista de mapa.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Personalizar la apariencia del mapa base

Para personalizar el aspecto del componente de mapas, debes definir el diseño de tus mapa con con herramientas basadas en la nube o configurando opciones directamente en el código.

Cómo usar el diseño de mapas basado en Cloud

Diseño de mapas basado en Cloud te permite crear y editar diseños de mapa para cualquiera de tus apps que usen Google Maps desde la consola de Google Cloud sin necesidad de aplicar cambios en tu código. El Los diseños de mapa se guardan como IDs de mapa en tu proyecto de Cloud. Para aplicar un estilo a tu Mapa de seguimiento de flota de JavaScript, especifica un mapId cuando crees el JourneySharingMapView. No se puede cambiar el campo mapId o se agrega después de que se crea una instancia de JourneySharingMapView. Lo siguiente En este ejemplo, se muestra cómo habilitar un diseño de mapa creado previamente con un ID de mapa.

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'
  }
});

Usa el diseño de mapas basado en código

Otra forma de personalizar el diseño de mapa es establecer mapOptions cuando crees el 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" }
        ]
      }
    ]
  }
});

Cómo usar las personalizaciones de los marcadores

Con la biblioteca de seguimiento de flotas de JavaScript, puedes personalizar la apariencia de marcadores agregados al mapa. Para ello, especifica las personalizaciones de los marcadores, que luego aplica la Biblioteca de seguimiento de flotas antes de agregar marcadores al mapa y con cada actualización de los marcadores.

Puedes crear una personalización simple especificando un MarkerOptions para aplicar a todos los marcadores del mismo tipo. Los cambios especificados en el se aplican después de que se crea cada marcador y reemplaza cualquier marcador opciones de estado.

Como opción más avanzada, puedes especificar una función de personalización. Las funciones de personalización permiten definir el estilo de los marcadores según los datos. como agregar interactividad a los marcadores, como el manejo de clics. Específicamente, la flota El seguimiento pasa datos a la función de personalización sobre el tipo de objeto que el marcador representa: un vehículo, una parada o una tarea. Esto permite que el estilo de los marcadores cambiar según el estado actual del elemento del marcador. por ejemplo, el la cantidad de paradas restantes o el tipo de tarea. Incluso puedes unir datos de fuentes fuera de Fleet Engine y diseña el marcador según esa información.

Además, puedes usar funciones de personalización para filtrar la visibilidad de los marcadores. Para hacerlo, llama a setVisible(false) en el marcador.

Sin embargo, por motivos de rendimiento, recomendamos filtrar con el filtro filtrar en el proveedor de ubicación, como FleetEngineFleetLocationProvider.vehicleFilter Dicho esto, cuando necesites funcionalidad de filtrado adicional, puedes aplicar con la función de personalización.

La biblioteca de seguimiento de flota proporciona los siguientes parámetros de personalización:

Cómo cambiar el estilo de los marcadores con MarkerOptions

En el siguiente ejemplo, se muestra cómo configurar el diseño de un marcador de vehículo con un MarkerOptions. Sigue este patrón para personalizar el estilo de cualquier con cualquiera de los parámetros de personalización del marcador mencionados anteriormente.

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Cómo cambiar el estilo de los marcadores con las funciones de personalización

En el siguiente ejemplo, se muestra cómo configurar el diseño de un marcador de vehículo. Seguir este patrón para personalizar el estilo de cualquier marcador con cualquiera de parámetros de personalización mencionados anteriormente.

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

Cómo agregar control de clics a los marcadores

En el siguiente ejemplo, se muestra cómo agregar el control de clics a un marcador de vehículo. Sigue este patrón para agregar el control de clics a cualquier marcador que utilice cualquiera de ellos. parámetros de personalización mencionados anteriormente.

JavaScript

vehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

Filtrar marcadores visibles

En el siguiente ejemplo, se muestra cómo filtrar los marcadores de vehículos que son visibles. Sigue este patrón para filtrar los marcadores con cualquier personalización de marcadores parámetros indicados anteriormente.

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
      if (remainingWaypoints > 10) {
        params.marker.setVisible(false);
      }
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

Personaliza las polilíneas cuando sigas un vehículo

Con la biblioteca de seguimiento de flota, también puedes personalizar el aspecto de la ruta del vehículo que sigues en el mapa. La biblioteca crea google.maps.Polyline objeto de cada par de coordenadas en las coordenadas activas o restantes path. Puedes aplicar ajustes de diseño a los objetos Polyline especificando personalizaciones de polilíneas. El luego, aplica estas personalizaciones en dos situaciones: antes de agregar el objetos al mapa y cuándo los datos utilizados para los objetos cambiaron.

Al igual que con la personalización de marcadores, puedes especificar PolylineOptions que se aplicará a todos los objetos Polyline coincidentes cuando se crearse o actualizarse.

Del mismo modo, puedes especificar una función de personalización. Funciones de personalización permitir el diseño individual de los objetos según los datos que envía Fleet Engine. La función puede cambiar el estilo de cada objeto basándose en el estado actual de el vehículo por ejemplo, aplicar un color al objeto Polyline con un matiz más profundo o y se vuelve más grueso cuando el vehículo se mueve más lento. Incluso puedes unirte de fuentes fuera de Fleet Engine y diseñar el objeto Polyline en función de eso información.

Puedes especificar las personalizaciones con los parámetros proporcionados en FleetEngineVehicleLocationProviderOptions Puedes configurar personalizaciones para diferentes estados de ruta en el ya viajó, viajó activamente o aún no viajó. El son los siguientes:

Cambia el diseño de los objetos Polyline con PolylineOptions

En el siguiente ejemplo, se muestra cómo configurar el diseño de un objeto Polyline con PolylineOptions Sigue este patrón para personalizar el estilo de cualquier objeto Polyline que use cualquiera de las personalizaciones de polilíneas mencionadas anteriormente.

JavaScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

TypeScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

Cambia el estilo de los objetos Polyline con las funciones de personalización

En el siguiente ejemplo, se muestra cómo configurar la propiedad Polyline de un objeto activo estilo. Sigue este patrón para personalizar el diseño de cualquier objeto Polyline. usando cualquiera de los parámetros de personalización de polilíneas mencionados anteriormente.

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.vehicle.waypoints[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: VehiclePolylineCustomizationFunctionParams) => {
    const distance = params.vehicle.waypoints[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'});
      }
    }
  };

Controla la visibilidad de los objetos Polyline

De forma predeterminada, todos los objetos Polyline son visibles. Sigue estos pasos para crear un objeto Polyline: invisible, establece su visible propiedad:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Procesa objetos Polyline optimizados para el tráfico

Fleet Engine devuelve datos de velocidad de tráfico para las rutas activas y restantes para el vehículo que sigues. Puedes usar esta información para diseñar el Polyline de acuerdo con su velocidad de tráfico:

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 =
  FleetEngineVehicleLocationProvider.
      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) => {
    FleetEngineVehicleLocationProvider.
        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 =
  FleetEngineVehicleLocationProvider.
      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: VehiclePolylineCustomizationFunctionParams) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Cómo mostrar una InfoWindow para un marcador de ubicación o vehículo

Puedes usar un InfoWindow para mostrar información adicional sobre un vehículo o un marcador de ubicación.

En el siguiente ejemplo, se muestra cómo crear un InfoWindow y adjuntarlo a un marcador de vehículo.

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off point.`);

    // 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 vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off.`);
    // 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();

Inhabilitar el ajuste automático

Puedes impedir que el mapa ajuste automáticamente el viewport al vehículo y la ruta prevista inhabilitando el ajuste automático. En el siguiente ejemplo, se muestra cómo inhabilitar el ajuste automático cuando configuras el mapa para compartir el recorrido vista.

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,
  ...
});

Cómo reemplazar un mapa existente

Puedes reemplazar un mapa existente que incluya marcadores o cualquier otra personalización. sin perder esas personalizaciones.

Por ejemplo, supongamos que tienes una página web con un elemento google.maps.Map estándar. entidad en la que se muestra un marcador:

<!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 Oracle Park Stadium
        var oraclePark = { lat: 37.780087547237365, lng: -122.38948437884427 };,
        // 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 Oracle Park
        var marker = new google.maps.Marker({ position: oraclePark, 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>

Para agregar la biblioteca de JavaScript Journey Share, que incluye el seguimiento de flota, haz lo siguiente:

  1. Agrega el código para la fábrica del token de autenticación.
  2. Inicializa un proveedor de ubicación en la función initMap().
  3. Inicializa la vista de mapa en la función initMap(). La vista contiene las mapa.
  4. Mueve tu personalización a la función de devolución de llamada para la vista de mapa de inicio.
  5. Agrega la biblioteca de ubicaciones al cargador de API.

En el siguiente ejemplo, se muestran los cambios que se deben realizar:

<!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 FleetEngineVehicleLocationProvider
        // as appropriate.
        locationProvider = new google.maps.journeySharing.FleetEngineVehicleLocationProvider({
          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.vehicleId = VEHICLE_ID;

          // (4) Add customizations like before.

          // The location of Oracle Park
          var oraclePark = {lat: 37.77995187146094, lng: -122.38957020952795};
          // 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 Oracle Park
          var marker = new google.maps.Marker({position: oraclePark, 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&v=beta"
    ></script>
  </body>
</html>

Si conduces un vehículo con el ID especificado cerca de Oracle Park, este se renderizará en la mapa.