Estilizar um mapa

Este documento mostra como personalizar a aparência de um mapa e controlar a visibilidade dos dados e as opções de janela de visualização. Você pode fazer isso das seguintes maneiras:

  • Usar a Estilização de mapas baseada na nuvem
  • Definir opções de estilo de mapa diretamente no seu código

Estilizar o mapa com a Estilização de mapas baseada na nuvem

Para aplicar um estilo de mapa ao seu mapa de compartilhamento de viagens do consumidor em JavaScript, especifique um mapId e qualquer outro mapOptions ao criar o JourneySharingMapView.

Os exemplos a seguir mostram como aplicar um estilo de mapa com um ID de mapa.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

Personalizar mapas diretamente no seu próprio código

Também é possível personalizar a estilização do mapa definindo opções ao criar o JourneySharingMapView. Os exemplos a seguir mostram como estilizar um mapa usando opções de mapa. Para mais informações sobre as opções de mapa que podem ser definidas, consulte mapOptions na referência da API Google Maps JavaScript.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

Controlar a visibilidade dos dados de tarefas para o SDK

É possível controlar a visibilidade de determinados objetos de tarefa no mapa usando regras de visibilidade.

Visibilidade padrão dos dados de tarefas

Por padrão, os dados das tarefas atribuídas a um veículo ficam visíveis quando o veículo está a cinco paradas da tarefa. A visibilidade termina quando a tarefa é concluída ou cancelada.

Esta tabela mostra a visibilidade padrão de cada tipo de tarefa. É possível personalizar a visibilidade de muitas tarefas, mas não de todas. Para mais detalhes sobre tipos de tarefas, consulte Tipos de tarefas no guia Tarefas programadas.

Tipo de tarefa Visibilidade padrão Personalizável? Descrição
Tarefas de indisponibilidade Não visível Não Usado para pausas e reabastecimento do motorista. Se um trajeto para uma tarefa de entrega também tiver outra parada de veículo, ela não será mostrada se tiver apenas tarefas de indisponibilidade. O horário previsto de chegada e o tempo estimado para conclusão da tarefa ainda são mostrados para a tarefa de entrega em si.
Abrir tarefas de veículo Visível Sim A visibilidade termina quando a tarefa é concluída ou cancelada. É possível personalizar a visibilidade das tarefas de veículo em aberto. Consulte Personalizar a visibilidade das tarefas de veículo em aberto.
Tarefas de veículo concluídas Não visível Não Não é possível personalizar a visibilidade das tarefas de veículo concluídas.

Personalizar a visibilidade das tarefas abertas do veículo

A interface TaskTrackingInfo fornece vários elementos de dados de tarefas que podem ser disponibilizados com o SDK do consumidor.

Elementos de dados de tarefas personalizáveis

Polilinhas de rota

Tempo estimado para chegada

Tempo estimado para concluir a tarefa

Distância restante até a tarefa

Contagem de paradas restantes

Localização do veículo

Opções de visibilidade por tarefa

É possível personalizar a configuração de visibilidade por tarefa definindo o TaskTrackingViewConfig ao criar ou atualizar uma tarefa no Fleet Engine. Use as seguintes opções de visibilidade para criar critérios que determinam a visibilidade de um elemento de tarefa:

Opções de visibilidade

Contagem de paradas restantes

Duração até o horário estimado de chegada

Distância restante

Sempre visível

Nunca visível

Para ilustrar, suponha que uma personalização de exemplo ajuste a visibilidade de três elementos de dados usando os critérios mostrados na tabela a seguir. Todos os outros elementos seguem as regras de visibilidade padrão.

Elemento de dados a ser ajustado Visibilidade Critério
Polilinha de rota Mostrar O veículo está a até três paradas de distância.
HEC Mostrar A distância restante é menor que 5.000 metros.
Contagem de paradas restantes Nunca mostrar O veículo está a até três paradas de distância.

O exemplo a seguir mostra essa configuração:

"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

Polilinhas de rota e regras de visibilidade da localização do veículo

As polilinhas de rota não podem ficar visíveis, a menos que a localização do veículo também esteja visível. Caso contrário, a localização do veículo pode ser inferida pelo final de uma polilinha.

Essas diretrizes ajudam você a fornecer uma combinação válida para opções de polilinha de rota e visibilidade da localização do veículo.

Mesmas opções de visibilidade Critério de visibilidade Orientação
Opções de polilinhas de trajeto definidas como sempre visíveis. Defina a localização do veículo como sempre visível.
A localização do veículo está definida como "Nunca visível". Defina as polilinhas de rota como nunca visíveis.
A opção de visibilidade é uma das seguintes:
  • contagem de paradas restantes
  • duração até o ETA
  • distância restante do percurso

Defina as opções de polilinha da rota com um valor menor ou igual ao valor definido para a localização do veículo. Exemplo:

    "taskTrackingViewConfig": {
      "routePolylinePointsVisibility": {
        "remainingStopCountThreshold": 3
      },
      "vehicleLocationVisibility": {
        "remainingStopCountThreshold": 5
      },
    }
Diferentes opções de visibilidade Critérios de visibilidade Orientação
A localização do veículo está visível

Isso acontece apenas quando ambas as opções de visibilidade da polilinha e de localização do veículo são atendidas. Exemplo:

  "taskTrackingViewConfig": {
    "routePolylinePointsVisibility": {
      "remainingStopCountThreshold": 3
    },
    "vehicleLocationVisibility": {
      "remainingDrivingDistanceMetersThreshold": 3000
    },
  }

Neste exemplo, a localização do veículo só fica visível se o número de paradas restantes for pelo menos 3 E a distância restante for de pelo menos 3.000 metros.

Desativar o ajuste automático

É possível impedir que o mapa ajuste automaticamente a janela de visualização ao veículo e ao trajeto previsto desativando o ajuste automático. O exemplo a seguir mostra como desativar o ajuste automático ao configurar a visualização do mapa de compartilhamento de trajeto.

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

A seguir