Personalizar marcadores

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

1. Diseña marcadores según el tipo: Especifica un MarkerOptions objeto para diseñar marcadores del mismo tipo. Los cambios que especifiques se aplicarán después de que se cree cada marcador, lo que anulará cualquier opción predeterminada. Para ver ejemplos, consulta Diseña marcadores según el tipo en esta guía.

2. Diseña marcadores según los datos: Especifica una función de personalización basada en datos, además de agregar interactividad a los marcadores, como el control de clics. Puedes diseñar en función de los datos del seguimiento de flota 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 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 flota con datos de fuentes externas a Fleet Engine y diseñar el marcador en función de esa información.

   Para ver ejemplos, consulta Diseña marcadores según los datos.

3. Agrega control de clics a los marcadores: Para ver ejemplos, consulta Agrega control de clics.

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

   • FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter
   • FleetEngineFleetLocationProvider.vehicleFilter

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

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 bajo demanda

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

Parámetros de personalización de tareas programadas

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

Diseña 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 enumeran en Opciones de personalización de marcadores.

Ejemplo de viajes bajo demanda

vehicleMarkerCustomization = {
  cursor: 'grab'
};

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Ejemplo de tareas programadas

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Diseña 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 en función de los datos con cualquiera de las opciones que se enumeran en Opciones de personalización de marcadores.

Ejemplo de viajes bajo demanda

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

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

Ejemplo de tareas programadas

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

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

Agrega control de clics a los marcadores

En el siguiente ejemplo, se muestra cómo agregar control de clics a un marcador de vehículo. Sigue este patrón para agregar control de clics a cualquier marcador con cualquiera de las opciones que se enumeran en Opciones de personalización de marcadores que se enumeran arriba.

Ejemplo de viajes bajo demanda

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

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

Ejemplo de tareas programadas

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

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

Filtra qué marcadores son visibles

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

Ejemplo de viajes bajo demanda

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

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

Ejemplo de tareas programadas

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

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

¿Qué sigue?

• Diseña un mapa
• Personaliza polilíneas