Personaliza los marcadores

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

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

2. Diseño de marcadores basado en datos: Especifica una función de personalización para aplicar diseño a los marcadores en función de 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 transfiere 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 en función del estado actual de ese elemento. Por ejemplo, la cantidad de puntos de referencia restantes hasta que el vehículo finaliza el viaje.

   • Fuentes externas: Puedes combinar los datos de uso compartido del viaje con datos de fuentes externas a Fleet Engine y diseñar el marcador en función de esa información tambié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 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 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.

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

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.

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 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.

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 polilíneas de rutas