Personalizar marcadores

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

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

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

   • Datos del seguimiento de flota: El seguimiento de 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 en función del estado actual de ese elemento. Por ejemplo, la cantidad de paradas restantes o el tipo de tarea.

   • Fuentes externas: Puedes combinar los datos de seguimiento de flotas con datos de fuentes externas de Fleet Engine y aplicar diseño al marcador según esa información.

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

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

4. Filtra qué marcadores son visibles: Filtra qué marcadores aparecen con las funciones de filtrado disponibles en el proveedor de ubicación de JavaScript. Por ejemplo:

   • FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter
   • FleetEngineFleetLocationProvider.vehicleFilter
   Nota: Si bien también puedes filtrar la visibilidad de los marcadores con funciones de personalización, es posible que esto afecte el rendimiento. Si debes hacerlo, llama a setVisible(false) en el marcador. Para ver ejemplos, consulta Filtra qué marcadores son visibles.

5. Usa la personalización de marcadores para hacer un seguimiento de un vehículo de entrega de tareas programadas: 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 el seguimiento de un vehículo de reparto.

Opciones de personalización de marcadores

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

Parámetros de personalización de viajes a pedido

• FleetEngineVehicleLocationProviderOptions
  • vehicleMarkerCustomization
  • originMarkerCustomization
  • destinationMarkerCustomization
  • intermediateDestinationMarkerCustomization
• FleetEngineFleetLocationProviderOptions
  • vehicleMarkerCustomization

Parámetros de personalización de tareas programadas

• FleetEngineDeliveryVehicleLocationProviderOptions
  • deliveryVehicleMarkerCustomization
  • plannedStopMarkerCustomization
  • taskMarkerCustomization
  • taskOutcomeMarkerCustomization
• FleetEngineDeliveryFleetLocationProviderOptions
  • deliveryVehicleMarkerCustomization

Aplica diseño 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 enumeradas 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 en función de los datos

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

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 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 usando cualquiera de las opciones enumeradas en las Opciones de personalización del marcador mencionadas anteriormente.

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

Filtra qué marcadores son visibles

Precaución: Si filtras la visibilidad de los marcadores con setVisible, puede afectar el rendimiento. Como práctica recomendada, debes filtrar qué marcadores aparecen con las capacidades de filtrado disponibles en el proveedor de ubicación de JavaScript.

Si necesitas usar setVisible, sigue este patrón para filtrar los marcadores con cualquiera de las opciones mencionadas en la sección 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?

• Cómo aplicar diseño a un mapa
• Cómo personalizar las polilíneas