Personaliza el aspecto de los marcadores agregados al mapa. Personaliza la apariencia y la apariencia de los marcadores agregados al mapa de dos maneras:
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, usaMarkerOptions
en esta .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.
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:
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 que se indican 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.
});
}
};