Personalizar marcadores

Con la biblioteca de seguimiento de flota de JavaScript, puedes personalizar el aspecto de los marcadores que se agregan al mapa. Para ello, especifica personalizaciones de marcadores, que la biblioteca de seguimiento de flota aplica antes de agregar marcadores al mapa y con cada actualización de marcadores. Puedes personalizar la apariencia de los marcadores de las siguientes maneras:

  1. Aplica un diseño a los marcadores según el tipo: Especifica un objeto MarkerOptions para aplicar un diseño a los marcadores del mismo tipo. Los cambios que especifiques se aplicarán después de que se cree cada marcador, y se anularán las opciones predeterminadas. Para ver ejemplos, consulta Marcadores de estilo según el tipo en esta guía.

  2. Aplica diseño a los marcadores según los datos: Especifica una función de personalización basada en datos y agrega interactividad a los marcadores, como el control de clics. Puedes aplicar un diseño basado en datos del seguimiento de la flota o de fuentes externas:

    • Datos del seguimiento de la flota: El Seguimiento de la flota pasa datos a la función de personalización, incluido el tipo de objeto que representa el marcador: vehículo, parada o tarea. Luego, el diseño del marcador cambia según el estado actual del elemento del marcador. Por ejemplo, la cantidad de paradas restantes o el tipo de tarea.

    • Fuentes externas: Puedes combinar los datos de seguimiento de la flota con datos de fuentes externas a Fleet Engine y también aplicar un diseño al marcador en función de esa información.

    Para ver ejemplos, consulta Cómo aplicar diseño a los marcadores según los datos.

  3. Agrega el control de clics a los marcadores: Para ver ejemplos, consulta Cómo agregar el control de clics.

  4. Filtrar los marcadores visibles: Filtra los marcadores que aparecen con las funciones de filtrado disponibles en el proveedor de ubicación de JavaScript. Por ejemplo:

  5. Usa la personalización de marcadores para hacer un seguimiento del vehículo de entrega de una tarea programada: Puedes personalizar los marcadores para hacer un seguimiento de los vehículos. Para obtener más información, consulta Cómo usar la personalización de marcadores para hacer un seguimiento de un vehículo de reparto.

Opciones de personalización de marcadores

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

Parámetros de personalización de viajes a pedido

Parámetros de personalización de tareas programadas

Cómo aplicar un estilo a los marcadores según el tipo

En el siguiente ejemplo, se muestra cómo configurar el diseño de un marcador de vehículo con un objeto MarkerOptions. Sigue este patrón para personalizar el diseño de cualquier marcador con cualquiera de las opciones que se indican en Opciones de personalización de marcadores.

Ejemplo de viajes bajo demanda

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Ejemplo de tareas programadas

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Aplica diseño a los marcadores según los datos

En el siguiente ejemplo, se muestra cómo configurar el diseño de un marcador de vehículo con funciones de personalización. Sigue este patrón para personalizar el diseño de cualquier marcador según los datos con cualquiera de las opciones que se indican en Opciones de personalización de marcadores.

Ejemplo de viajes bajo demanda

JavaScript

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

TypeScript

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

Ejemplo de tareas programadas

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

Cómo agregar el 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 con cualquiera de las opciones que se indican en Opciones de personalización de marcadores.

Ejemplo de viajes bajo demanda

JavaScript

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

TypeScript

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

Ejemplo de tareas programadas

JavaScript

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

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

Cómo filtrar los marcadores visibles

Si necesitas usar setVisible, sigue este patrón para filtrar cualquier marcador con cualquiera de las opciones que se indican en Opciones de personalización de marcadores más arriba.

Ejemplo de viajes bajo demanda

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

Ejemplo de tareas programadas

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

¿Qué sigue?