Personalizar marcadores

Este documento mostra como personalizar os marcadores de veículo e local no mapa usado no app de rastreamento de envios baseado na Web para consumidores.

Com o SDK do consumidor JavaScript, é possível personalizar a aparência de dois tipos de marcadores adicionados ao mapa:

• Marcadores de veículos de entrega: use deliveryVehicleMarkerCustomization
• Marcadores de destino: use destinationMarkerCustomization

Isso pode ser feito de duas maneiras:

• Mais simples: especifique um objeto MarkerOptions para aplicar a todos os marcadores do mesmo tipo. O SDK do consumidor aplica o estilo em duas situações: antes de adicionar os marcadores ao mapa e quando os dados usados para os marcadores mudam.
• Mais avançado: especifique uma função de personalização. As funções de personalização permitem estilizar os marcadores com base em dados, além de adicionar interatividade a eles, como o processamento de cliques. Especificamente, o SDK do consumidor transmite dados para a função de personalização sobre o tipo de objeto que o marcador representa: veículo ou destino. Isso permite que o estilo do marcador mude com base no estado atual do elemento de marcador. Por exemplo, o número de paradas planejadas restantes até o destino. Você pode até mesmo fazer junções com dados de fontes fora do Fleet Engine e estilizar o marcador com base nessas informações.

Exemplo simples: use MarkerOptions

O exemplo a seguir mostra como configurar o estilo de um marcador de veículo com um objeto MarkerOptions. Este exemplo define a opacidade do marcador como 50%.

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

Exemplo avançado: usar uma função de personalização

O exemplo a seguir mostra como configurar o estilo de um marcador de veículo para mostrar a contagem restante de paradas antes de chegar à parada da tarefa programada.

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    const stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

Adicionar o processamento de cliques aos marcadores

É possível adicionar o processamento de cliques a qualquer marcador, como no exemplo a seguir para um marcador de veículo.

deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

Mostrar mais informações sobre marcadores

Você pode usar um InfoWindow para mostrar mais informações sobre um veículo ou marcador de local. O exemplo a seguir cria um InfoWindow e o anexa a um marcador de veículo:

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', e => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

A seguir

• Personalizar polilinhas