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 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 do 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.
});

Estilizar mapas diretamente no seu código

Também é possível personalizar o estilo do mapa definindo as opções do mapa ao criar o JourneySharingMapView. Os exemplos a seguir mostram como estilizar um mapa usando as opções do 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.

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 no 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 até 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 tarefas, consulte Tipos de tarefas no guia Tarefas programadas.

Personalizar a visibilidade das tarefas de veículo abertas

A interface TaskTrackingInfo fornece vários elementos de dados de tarefas que podem ser disponibilizados 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 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.

O exemplo a seguir mostra essa configuração:

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

Regras de visibilidade de polilinhas de rota e localização de veículos

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 poderá ser inferida pelo final de uma polilinha.

Essas diretrizes ajudam você a fornecer uma combinação válida para as opções de visibilidade de polilinhas de rota e localização de veículos.

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

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

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

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