Personaliza los marcadores

Personaliza el aspecto de los marcadores que se agregan 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, 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 a Fleet Engine y aplicar diseño al marcador según esa 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: Para ver ejemplos, 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:

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

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