Estilizar um mapa

Neste documento, mostramos 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 mapa de compartilhamento de percurso 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.

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

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

Estilize mapas diretamente no seu próprio código

Também é possível personalizar o estilo do mapa definindo as opções dele ao criar o JourneySharingMapView. Os exemplos a seguir mostram como estilizar um mapa usando as opções de mapa. Para mais informações sobre as opções de mapa que você pode definir, consulte mapOptions na referência da API Maps 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" }
        ]
      }
    ]
  }
});

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

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 os tipos de tarefa, consulte Tipos de tarefa no guia Tarefas agendadas.

Personalizar a visibilidade das tarefas de veículo abertas

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

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:

Para ilustrar, suponha que um exemplo de personalização 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.

O exemplo a seguir mostra essa configuração:

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

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

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

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

    "taskTrackingViewConfig": {
      "routePolylinePointsVisibility": {
        "remainingStopCountThreshold": 3
      },
      "vehicleLocationVisibility": {
        "remainingStopCountThreshold": 5
      },
    }
    

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

Desativar o ajuste automático

Para impedir que o mapa ajuste automaticamente a janela de visualização ao veículo e ao trajeto previsto, desative 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.

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

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

A seguir

• Personalizar marcadores
• Personalizar polilinhas