Definizione di una mappa

Questo documento spiega come personalizzare l'aspetto di una mappa e controllare la visibilità dei dati e le opzioni della visualizzazione. Puoi farlo nei seguenti modi:

  • Utilizza la personalizzazione delle mappe basata su cloud
  • Imposta le opzioni di stile di mappa direttamente nel tuo codice

Personalizza la mappa con la personalizzazione delle mappe basata su cloud

Per applicare uno stile di mappa alla mappa di condivisione del percorso per i consumatori JavaScript, specifica un mapId e qualsiasi altra mapOptions quando crei JourneySharingMapView.

Gli esempi seguenti mostrano come applicare uno stile di mappa con un ID mappa.

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

Definisci lo stile delle mappe direttamente nel tuo codice

Puoi anche personalizzare lo stile della mappa impostando le opzioni della mappa quando crei JourneySharingMapView. I seguenti esempi mostrano come applicare uno stile a una mappa utilizzando le opzioni della mappa. Per ulteriori informazioni sulle opzioni della mappa che puoi impostare, consulta mapOptions nel riferimento API Maps JavaScript di Google.

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" }
        ]
      }
    ]
  }
});

Controlla la visibilità dei dati delle attività per l'SDK

Puoi controllare la visibilità di determinati oggetti delle attività sulla mappa utilizzando le regole di visibilità.

Visibilità predefinita dei dati delle attività

Per impostazione predefinita, i dati relativi alle attività assegnate a un veicolo sono visibili quando il veicolo si trova entro 5 fermate dall'attività. La visibilità termina quando l'attività viene completata o annullata.

Questa tabella mostra la visibilità predefinita per ogni tipo di attività. Puoi personalizzare la visibilità di molte attività, ma non di tutte. Per maggiori dettagli sui tipi di attività, consulta Tipi di attività nella guida Attività pianificate.

Tipo di attività Visibilità predefinita Personalizzabile? Descrizione
Attività di non disponibilità Non visibile No Utilizzate per le pause dei conducenti e il rifornimento. Se un percorso verso un'attività di consegna contiene anche un'altra fermata del veicolo, questa non viene mostrata se contiene solo attività di non disponibilità. L'ora di arrivo stimata e l'ora di completamento dell'attività stimata vengono comunque visualizzate per l'attività di consegna stessa.
Apri le attività del veicolo Visibile Sì La visibilità termina quando l'attività viene completata o annullata. Puoi personalizzare la visibilità delle attività del veicolo aperte. Consulta Personalizza la visibilità delle attività aperte del veicolo.
Attività del veicolo chiuse Non visibile No Non puoi personalizzare la visibilità delle attività del veicolo chiuse.

Personalizza la visibilità delle attività aperte del veicolo

L'interfaccia TaskTrackingInfo fornisce una serie di elementi di dati delle attività che possono essere resi visibili con l'SDK Consumer.

Elementi dei dati delle attività personalizzabili

Polilinee del percorso

Orario di arrivo stimato

Tempo stimato per il completamento dell'attività

Distanza di guida rimanente per l'attività

Numero di fermate rimanenti

Posizione del veicolo

Opzioni di visibilità per attività

Puoi personalizzare la configurazione della visibilità per ogni attività impostando TaskTrackingViewConfig durante la creazione o l'aggiornamento di un'attività all'interno di Fleet Engine. Utilizza le seguenti opzioni di visibilità per creare criteri per determinare la visibilità di un elemento dell'attività:

Opzioni di visibilità

Numero di fermate rimanenti

Durata fino all'ora di arrivo prevista

Distanza di guida rimanente

Sempre visibile

Mai visibile

Per illustrare, supponiamo che una personalizzazione di esempio regoli la visibilità di tre elementi di dati utilizzando i criteri mostrati nella tabella seguente. Tutti gli altri elementi seguono le regole di visibilità predefinite.

Elemento dati da modificare Visibilità Criterio
Polilinea del percorso Mostra Il veicolo si trova entro 3 fermate.
Data di completamento prevista Mostra La distanza di guida rimanente è inferiore a 5000 metri.
Numero di fermate rimanenti Non mostrare mai Il veicolo si trova entro 3 fermate.

L'esempio seguente mostra questa configurazione:

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

Regole di visibilità per le polilinee dei percorsi e la posizione dei veicoli

Le polilinee del percorso non possono essere visibili a meno che non lo sia anche la posizione del veicolo; in caso contrario, la posizione del veicolo può essere dedotta dalla fine di una polilinea.

Queste linee guida ti aiutano a fornire una combinazione valida per le opzioni di visibilità della polilinea del percorso e della posizione del veicolo.

Stesse opzioni di visibilità Criterio di visibilità Consulenza
Opzioni delle polilinee del percorso impostate su sempre visibili. Imposta la posizione del veicolo su Sempre visibile.
Posizione del veicolo impostata su Mai visibile. Imposta le polilinee del percorso in modo che non siano mai visibili.
L'opzione di visibilità è una delle seguenti:
  • numero di fermate rimanenti
  • durata fino all'orario di arrivo stimato
  • distanza di guida rimanente

Imposta le opzioni della polilinea del percorso su un valore inferiore o uguale al valore impostato per la posizione del veicolo. Ad esempio:

    "taskTrackingViewConfig": {
      "routePolylinePointsVisibility": {
        "remainingStopCountThreshold": 3
      },
      "vehicleLocationVisibility": {
        "remainingStopCountThreshold": 5
      },
    }
    
Diverse opzioni di visibilità Criteri di visibilità Consulenza
La posizione del veicolo è visibile

Questo accade solo quando sono soddisfatte entrambe le opzioni di visibilità della posizione del veicolo e della polilinea. Ad esempio:

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

In questo esempio, la posizione del veicolo è visibile solo se il numero di fermate rimanenti è almeno 3 E la distanza di guida rimanente è almeno 3000 metri.

Disattiva l'adattamento automatico

Puoi impedire alla mappa di adattare automaticamente l'area visibile al veicolo e al percorso previsto disattivando l'adattamento automatico. L'esempio seguente mostra come disattivare l'adattamento automatico quando configuri la visualizzazione mappa della condivisione del percorso.

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

Passaggi successivi