Personaliza los marcadores

Selecciona la plataforma: Android iOS JavaScript

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

1. Estilo de 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 Cómo cambiar el estilo de los marcadores con MarkerOptions en esta guía.

2. Estilo de marcadores según los datos: Especifica una función de personalización para diseñar marcadores según los datos. Puedes diseñar en función de los datos del uso compartido de viajes o de fuentes externas:

   • Datos del uso compartido de viajes: El uso compartido de viajes pasa los datos del marcador 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 del marcador. Por ejemplo, la cantidad de puntos de ruta restantes hasta que el vehículo finalice el viaje.

   • Fuentes externas: También puedes combinar los datos del uso compartido de viajes con datos de fuentes externas a Fleet Engine y diseñar el marcador en función de esa información.

   Para ver ejemplos, consulta Cómo cambiar el estilo de los marcadores con funciones de personalización en esta guía.

3. Agrega el control de clics a los marcadores: Para ver ejemplos, consulta Cómo agregar el 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

Cómo cambiar el estilo de los marcadores con MarkerOptions

En el siguiente ejemplo, se muestra cómo configurar el diseño del marcador de vehículo 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 enumeran en Opciones de personalización de marcadores.

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Cómo cambiar el estilo de los marcadores con funciones de personalización

En el siguiente ejemplo, se muestra cómo configurar el diseño del marcador de vehículo 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 enumeran en Opciones de personalización de marcadores.

JavaScript

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

TypeScript

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

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 los parámetros de personalización de marcadores que se enumeran en Opciones de personalización de marcadores.

JavaScript

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

TypeScript

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

¿Qué sigue?

• Personaliza las polilíneas de ruta