Personaliza los marcadores

Selecciona la plataforma: Android iOS JavaScript

Personaliza el aspecto de los marcadores agregados al mapa. Personaliza la apariencia y la apariencia de los marcadores agregados al mapa de dos maneras:

1. Aplicar estilo a los marcadores según el tipo: Especifica un MarkerOptions para aplicar diseño a marcadores del mismo tipo. Los cambios que especifiques se aplica después de crear cada marcador y reemplaza las opciones predeterminadas. Para ver ejemplos, consulta Para cambiar el estilo de los marcadores, usa MarkerOptions en esta .

2. Diseño de marcadores basado en datos: Especifica una función de personalización para marcadores de estilo en función de los datos. Puedes aplicar ajustes de estilo en función de los datos del recorrido o de fuentes externas:

   • Datos de la opción para compartir el recorrido: Con esta función, se transfieren los datos de los marcadores al función de personalización, incluido el tipo de objeto que representa el marcador: vehículo, origen, punto de referencia o destino. Luego cambia el estilo del marcador según el estado actual del elemento del marcador. Por ejemplo, el número de puntos de referencia restantes hasta que el vehículo finalice el viaje.

   • Fuentes externas: Puedes combinar los datos de uso compartido del recorrido con datos procedentes de fuentes externas a Fleet Engine y definir el estilo del marcador según esos datos información.

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

3. Agrega control de clics a los marcadores: Por ejemplo, Consulta Cómo agregar control de clics.

Opciones de personalización de marcadores

Ambas opciones usan los siguientes parámetros de personalización en la API de Google la API de Maps JavaScript 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 de los marcadores de vehículos con Un objeto MarkerOptions Sigue este patrón para personalizar el estilo de cualquier con cualquiera de las personalizaciones del marcador que se mencionan en Opciones de personalización de los marcadores:

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Cómo cambiar el estilo 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 funciones de personalización. Sigue este patrón para personalizar el estilo de cualquier marcador con cualquiera de los parámetros de personalización del marcador que se mencionan en Opciones de personalización de los 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 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 ellos. parámetros de personalización 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 polilíneas de rutas