Personalizar marcadores

Con la biblioteca de seguimiento de flota 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 la flota antes de agregar marcadores al mapa y con cada actualización de los marcadores. Puedes personalizar el aspecto de los marcadores en de la siguiente manera:

  1. Aplicar estilo a los marcadores según el tipo: Especifica un MarkerOptions para aplicar diseño a marcadores del mismo tipo. Luego, los cambios que especifiques una vez que se crea cada marcador y reemplaza las opciones predeterminadas. Para consulta Cómo aplicar diseño a los marcadores según el tipo en la en esta guía.

  2. Diseño de marcadores basado en datos: Especifica una función de personalización basada en y agregar interactividad a los marcadores, como el manejo de clics. Puedes adaptar el estilo en función de los datos de seguimiento de la flota o de fuentes externas:

    • Datos de seguimiento de flotas: El seguimiento de flota pasa datos a la personalizada, incluido el tipo de objeto que el marcador representa: vehículo, parada o tarea. Luego cambia el estilo del marcador según el estado actual del elemento del marcador. Por ejemplo, el número de paradas restantes o el tipo de tarea.

    • Fuentes externas: Puedes combinar los datos de seguimiento de la flota con datos de fuentes fuera de Fleet Engine y definir el estilo del marcador según ese información.

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

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

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

  5. Usa la personalización de marcadores para hacer un seguimiento de un vehículo que entrega tareas programadas: Puedes personalizar los marcadores para seguir vehículos. Para obtener más información, consulta Usa la personalización de los marcadores para hacer el seguimiento de un vehículo de reparto.

Opciones de personalización de marcadores

La biblioteca de seguimiento de la 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

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 estilo de cualquier marcador con cualquiera de las opciones enumeradas en Opciones de personalización de los marcadores:

Ejemplo de viajes a pedido

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 funciones de personalización. Sigue este patrón para personalizar el estilo de cualquier marcador basado en los datos que usan cualquiera de las opciones enumeradas en Opciones de personalización de marcadores mencionadas anteriormente

Ejemplo de viajes a pedido

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 que utilice cualquiera de en la sección Opciones de personalización de marcadores que se mencionan más arriba.

Ejemplo de viajes a pedido

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 que son visibles

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 a pedido

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?