Personaliza los marcadores

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

1. Aplica un diseño a los marcadores según el tipo: Especifica un objeto MarkerOptions para aplicar un diseño 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. Diseña marcadores según los datos: Especifica una función de personalización para diseñar marcadores según los datos. Puedes aplicar un diseño basado en los datos del uso compartido de viajes 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 ruta o destino. Luego, el diseño del marcador cambia según el estado actual del elemento del marcador. Por ejemplo, la cantidad de waypoints 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. Agrega controladores de clics a los marcadores: Para ver ejemplos, consulta Cómo agregar controladores 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 diseño 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 indican en Opciones de personalización de marcadores.

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Cómo cambiar el diseño 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 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}`);
};

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