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 agregados al mapa de dos maneras:

1. Aplica estilo a los marcadores según el tipo: Especifica un objeto MarkerOptions para aplicar estilo a los marcadores del mismo tipo. Los cambios que especifiques se aplicarán después de que se cree cada marcador, y se anularán las opciones predeterminadas. Para ver ejemplos, consulta Cómo cambiar el diseño de los marcadores con MarkerOptions en esta guía.

2. Estilizar marcadores basados en datos: Especifique una función de personalización para estilizar marcadores basados en datos. Puedes aplicar estilos basándote en datos de experiencias compartidas o de fuentes externas:

   • Datos de compartir viajes: Compartir 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 ruta o destino. Luego, el diseño del marcador cambia según el estado actual del elemento del marcador. Por ejemplo, el número de puntos de ruta restantes hasta que el vehículo finalice el viaje.

   • Fuentes externas: Puedes combinar los datos de uso compartido del viaje con datos de fuentes externas a Fleet Engine y también aplicar un diseño al marcador en función de 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. Cómo agregar controladores de clics a los marcadores: Para ver ejemplos, consulta Cómo agregar controladores de clics.

Opciones de personalización de marcadores

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

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

Cómo cambiar el diseño de los marcadores con MarkerOptions

En el siguiente ejemplo, se muestra cómo configurar el diseño del marcador del vehículo con un objeto MarkerOptions. Siga este patrón para personalizar el estilo de cualquier marcador utilizando cualquiera de las personalizaciones de marcadores enumeradas en Opciones de personalización de marcadores.

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Cambie el estilo de los marcadores utilizando las funciones de personalización.

El siguiente ejemplo muestra cómo configurar el estilo de los marcadores de vehículos utilizando funciones de personalización. Siga este patrón para personalizar el estilo de cualquier marcador utilizando cualquiera de los parámetros de personalización de marcadores enumerados 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. Siga este patrón para agregar el manejo de clics a cualquier marcador utilizando cualquiera de los parámetros de personalización de marcadores enumerados 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 rutas