Questo documento illustra come personalizzare l'aspetto di una mappa e controllare la visibilità dei dati e le opzioni del riquadro. Puoi farlo nei seguenti modi:
- Utilizzare la personalizzazione delle mappe basata su cloud
- Impostare le opzioni di stile della mappa direttamente nel tuo codice
Personalizzare lo stile della mappa con la personalizzazione delle mappe basata su cloud
Per applicare uno stile di mappa alla mappa di condivisione del viaggio del consumatore JavaScript, specifica un
mapId e
qualsiasi altro
mapOptions
quando crei JourneySharingMapView.
Gli esempi riportati di seguito 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 il
JourneySharingMapView. Gli esempi riportati di seguito 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 dell'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" }
]
}
]
}
});
Controllare 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 delle attività assegnate a un veicolo sono visibili quando il veicolo si trova a 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à, vedi Tipi di attività nella guida Attività pianificate.
| Tipo di attività | Visibilità predefinita | Personalizzabile? | Descrizione |
|---|---|---|---|
| Attività di mancata disponibilità | Non visibile | No | Utilizzato per le pause e il rifornimento del conducente. Se un percorso verso un'attività di consegna contiene anche un'altra fermata del veicolo, questa fermata non viene mostrata se contiene solo attività di indisponibilità. L'ora di arrivo stimata e il tempo stimato per il completamento dell'attività vengono comunque visualizzati per l'attività di consegna stessa. |
| Aprire le attività del veicolo | Visibile | Sì | La visibilità termina quando l'attività viene completata o annullata. Puoi personalizzare la visibilità delle attività aperte relative al veicolo. Vedi Personalizzare la visibilità delle attività del veicolo aperte. |
| Attività relative a veicoli chiusi | Non visibile | No | Non puoi personalizzare la visibilità delle attività chiuse del veicolo. |
Personalizzare 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 di dati delle attività personalizzabili | |
|---|---|
|
Polilinee del percorso Tempo stimato per l'arrivo Tempo stimato per il completamento dell'attività |
Distanza di guida rimanente per raggiungere l'attività Numero di fermate rimanenti Posizione del veicolo |
Opzioni di visibilità per attività
Puoi personalizzare la configurazione della visibilità in base all'attività impostando
TaskTrackingViewConfig quando crei o aggiorni un'attività in
Fleet Engine. Utilizza le seguenti opzioni di visibilità per creare criteri per
determinare la visibilità di un elemento di attività:
| Opzioni di visibilità | ||
|---|---|---|
|
Numero di fermate rimanenti Durata fino all'orario di arrivo stimato Distanza di guida rimanente |
Sempre visibile Mai visibile |
|
Per illustrare questo concetto, supponiamo che una personalizzazione di esempio regoli la visibilità di tre elementi di dati utilizzando i criteri mostrati nella seguente tabella. Tutti gli altri elementi seguono le regole di visibilità predefinite.
| Elemento di dati da modificare | Visibilità | Criterio |
|---|---|---|
| Polilinea dell'itinerario | Mostra | Il veicolo si trova a tre fermate. |
| ETA | Mostra | La distanza di guida rimanente è inferiore a 5000 metri. |
| Numero di fermate rimanenti | Non mostrare mai | Il veicolo si trova a tre fermate. |
Il seguente esempio mostra questa configurazione:
"taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"estimatedArrivalTimeVisibility": {
"remainingDrivingDistanceMetersThreshold": 5000
},
"remainingStopCountVisibility": {
"never": true
}
}
Polilinee del percorso e regole di visibilità della posizione del veicolo
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 in modo che sia sempre visibile. | |
| La 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:
|
Imposta le opzioni della polilinea del percorso su un valore minore o uguale a quello 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 | Ciò si verifica solo quando vengono soddisfatte entrambe le opzioni di visibilità della polilinea e della posizione del veicolo. 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. |
Disattivare l'adattamento automatico
Puoi impedire alla mappa di adattare automaticamente la visualizzazione al veicolo e al percorso previsto disattivando l'adattamento automatico. L'esempio seguente mostra come disattivare l'adattamento automatico quando configuri la visualizzazione della mappa della condivisione del viaggio.
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,
...
});