Personaliza los marcadores

Selecciona la plataforma: Android iOS JavaScript

Personaliza el aspecto de los marcadores que se agregan al mapa. Personaliza el aspecto de los marcadores que se agregaron al mapa de dos 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 que se cree cada marcador y reemplazarán cualquier opción predeterminada. Para ver ejemplos, consulta Cambia el diseño de los marcadores con MarkerOptions en esta guía.

2. Marcadores de diseño basados en datos: Especifica una función de personalización para aplicar diseño a los marcadores según los datos. Puedes aplicar diseño en función de los datos del uso compartido de recorridos 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 del marcador. Por ejemplo, la cantidad de puntos de referencia que quedan hasta que el vehículo termina el viaje.

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

   Para ver ejemplos, consulta Cómo cambiar el diseño 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 Agrega el control de clics.

Opciones de personalización de marcadores

Ambas opciones usan los siguientes parámetros de personalización en la API de Google Maps JavaScript 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.

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

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

En el siguiente ejemplo, se muestra cómo configurar el diseño de los marcadores de vehículos con las 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.

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

Agrega 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 indican 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?

• Cómo personalizar las polilíneas de ruta