Personaliza los marcadores

Personaliza el aspecto de los marcadores que se agregan al mapa. Personaliza el aspecto de los marcadores que se agregan al mapa de dos maneras:

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

2. Asigna un diseño a los marcadores según los datos: Especifica una función de personalización para asignar un diseño a los marcadores según los datos. Puedes aplicar diseño según los datos del uso compartido de viajes o de fuentes externas:

   • Datos del uso compartido de viajes: El uso compartido de viajes pasa datos de marcadores a la función de personalización, incluido el tipo de objeto que representa el marcador: vehículo, origen, punto de referencia o destino. Luego, el diseño del marcador cambia según el estado actual del elemento de marcador. Por ejemplo, la cantidad de puntos de referencia restantes hasta que el vehículo finalice el viaje.

   • Fuentes externas: Puedes combinar los datos compartidos de viajes con datos de fuentes externas a Fleet Engine y, además, aplicar diseño al marcador según esa información.

   Para ver ejemplos, consulta Cambia el diseño de los marcadores con funciones de personalización en esta guía.

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

Opciones de personalización de marcadores

Ambas opciones usan los siguientes parámetros de personalización en la API de Maps JavaScript de Google en FleetEngineTripLocationProviderOptions:

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

Cambia el diseño de los marcadores con MarkerOptions

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

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Cambia el diseño de los marcadores con funciones de personalización

En el siguiente ejemplo, se muestra cómo configurar el diseño de los marcadores de vehículos con funciones de personalización. Sigue este patrón para personalizar el diseño de cualquier marcador con cualquiera de los parámetros de personalización de marcadores que se indican en Opciones de personalización de marcadores.

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

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
};

Agrega un controlador de clics a los marcadores

En el siguiente ejemplo, se muestra cómo agregar un controlador de clics a un marcador de vehículo. Sigue este patrón para agregar el control de clics a cualquier marcador con cualquiera de los parámetros de personalización de marcadores que se indican en Opciones de personalización de marcadores.

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

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

¿Qué sigue?

• Cómo personalizar las polilíneas de ruta