Questo documento spiega come personalizzare l'aspetto di una mappa e di un controllo le opzioni di visibilità dei dati e area visibile. Puoi farlo nei seguenti modi:
- Utilizza la personalizzazione delle mappe basata su cloud
- Imposta le opzioni di stile della mappa direttamente nel tuo codice
Applica uno stile alla mappa utilizzando la Personalizzazione delle mappe basata su cloud
Personalizza l'aspetto del componente Maps utilizzando le mappe basate su cloud stili. Puoi creare e modificare gli stili di mappa nella console Google Cloud per qualsiasi delle tue app che usano Google Maps, senza richiedere alcuna modifica al codice. Per ulteriori informazioni, vedi Personalizzazione delle mappe basata su cloud.
Entrambi i campi
ConsumerMapView
e ai
ConsumerMapFragment
supportano la personalizzazione delle mappe basata su cloud.
Per utilizzare la Personalizzazione delle mappe basata su cloud, assicurati che le mappe selezionate
Il renderer è LATEST
. Le seguenti sezioni mostrano esempi di utilizzo
la personalizzazione delle mappe basata su cloud con il tuo progetto.
ConsumerMapView
Per utilizzare la Personalizzazione delle mappe basata su cloud in ConsumerMapView
, imposta la
campo mapId
su GoogleMapOptions
e passa il GoogleMapOptions
a
getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment,
GoogleMapOptions)
or getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity,
GoogleMapOptions)
Esempio
Java
public class SampleAppActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ConsumerMapView mapView = findViewById(R.id.consumer_map_view);
if (mapView != null) {
GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
mapView.getConsumerGoogleMapAsync(
new ConsumerMapReadyCallback() {
@Override
public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
// ...
}
},
/* fragmentActivity= */ this,
/* googleMapOptions= */ optionsWithMapId);
}
}
}
Kotlin
class SampleAppActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView
val optionsWithMapId = GoogleMapOptions().mapId("map-id")
mapView.getConsumerGoogleMapAsync(
object : ConsumerGoogleMap.ConsumerMapReadyCallback() {
override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
// ...
}
},
/* fragmentActivity= */ this,
/* googleMapOptions= */ optionsWithMapId)
}
}
ConsumerMapFragment
Esistono due modi per utilizzare la Personalizzazione delle mappe basata su cloud ConsumerMapFragments:
- in modo statico con il file XML.
- In modo dinamico con
newInstance
.
In modo statico con il file XML
Per utilizzare la personalizzazione delle mappe basata su cloud con il file XML nel
ConsumerMapFragment
, aggiungi l'attributo XML map:mapId
con il valore specificato
mapId
. Vedi il seguente esempio:
<fragment
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
android:id="@+id/consumer_map_fragment"
map:mapId="map-id"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
In modo dinamico con newInstance
Per utilizzare la Personalizzazione delle mappe basata su cloud con newInstance
in
ConsumerMapFragment
, imposta il campo mapId
su GoogleMapOptions
e supera il
Da GoogleMapOptions
a newInstance
. Vedi il seguente esempio:
Java
public class SampleFragmentJ extends Fragment {
@Override
public View onCreateView(
@NonNull LayoutInflater inflater,
@Nullable ViewGroup container,
@Nullable Bundle savedInstanceState) {
final View view = inflater.inflate(R.layout.consumer_map_fragment, container, false);
GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
ConsumerMapFragment consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId);
getParentFragmentManager()
.beginTransaction()
.add(R.id.consumer_map_fragment, consumerMapFragment)
.commit();
consumerMapFragment.getConsumerGoogleMapAsync(
new ConsumerMapReadyCallback() {
@Override
public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
// ...
}
});
return view;
}
}
Kotlin
class SampleFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?): View? {
val view = inflater.inflate(R.layout.consumer_map_fragment, container, false)
val optionsWithMapId = GoogleMapOptions().mapId("map-id")
val consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId)
parentFragmentManager
.beginTransaction()
.add(R.id.consumer_map_fragment, consumerMapFragment)
.commit()
consumerMapFragment.getConsumerGoogleMapAsync(
object : ConsumerMapReadyCallback() {
override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
// ...
}
})
return view
}
}
Per applicare uno stile di mappa alla tua mappa di condivisione del percorso del consumatore JavaScript, specifica uno
mapId
e
qualsiasi altro
mapOptions
quando crei JourneySharingMapView
.
I seguenti esempi 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.
});
Applica uno stile alle mappe direttamente nel tuo codice
Puoi anche personalizzare lo stile della mappa impostando le opzioni della mappa quando crei la
JourneySharingMapView
. I seguenti esempi mostrano come applicare uno stile a una mappa utilizzando
opzioni della mappa. Per ulteriori informazioni sulle opzioni della mappa che puoi impostare, vedi
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" }
]
}
]
}
});
Controlla la visibilità dei dati delle attività nell'SDK
Puoi controllare la visibilità di determinati oggetti delle attività sulla mappa utilizzando 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 entro 5 fermate dall'attività. La visibilità termina quando l'attività viene completato o annullato.
Questa tabella mostra la visibilità predefinita per ciascun tipo di attività. Puoi personalizzare la visibilità per molte attività, ma non tutte. Per ulteriori dettagli sull'attività di attività, consulta Tipi di attività nella guida Attività pianificate.
Tipo di attività | Visibilità predefinita | Personalizzabile? | Descrizione |
---|---|---|---|
Attività di indisponibilità | Non visibile | No | Utilizzato per le soste del conducente e il rifornimento. Se il routing a un'attività di consegna Contiene anche un'altra fermata di veicoli, questa fermata non viene mostrata se contiene solo attività di indisponibilità. Ora di arrivo prevista e il tempo di completamento stimato dell'attività sono ancora mostrati per la consegna all'attività stessa. |
Apri attività veicolo | Visibile | Sì | La visibilità termina quando l'attività viene completata o annullata. Puoi personalizzare la visibilità delle attività aperte del veicolo. Consulta: Personalizza la visibilità attività del veicolo. |
Attività del veicolo chiuse | Non visibile | No | Non puoi personalizzare la visibilità delle attività chiuse del veicolo. |
Personalizza la visibilità delle attività aperte del veicolo
L'interfaccia di TaskTrackingInfo
fornisce una serie di elementi dei dati delle attività
che possono essere rese visibili con l'SDK consumer.
Elementi di dati delle attività personalizzabili | |
---|---|
Polilinee di percorso Tempo stimato all'arrivo Tempo stimato per il completamento dell'attività |
Distanza di guida rimanente dall'attività Numero di interruzioni rimanenti Posizione del veicolo |
Opzioni di visibilità per attività
Puoi personalizzare la configurazione della visibilità in base alle singole attività impostando
TaskTrackingViewConfig
quando crei o aggiorni un'attività all'interno
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 interruzioni rimanenti Durata fino all'ora di arrivo prevista Distanza di guida rimanente |
Sempre visibile Mai visibile |
Come esempio, supponiamo che una personalizzazione di esempio modifichi la visibilità per tre di dati utilizzando i criteri mostrati nella seguente tabella. Tutti gli altri seguono le regole di visibilità predefinite.
Elemento di dati da regolare | Visibilità | Criterio |
---|---|---|
Polilinea di percorso | Mostra | Il veicolo è a meno di 3 fermate. |
ETA | Mostra | La distanza di guida rimanente è inferiore a 5000 metri. |
Numero di interruzioni rimanenti | Non mostrare mai | Il veicolo è a meno di 3 fermate. |
L'esempio seguente mostra questa configurazione:
"taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"estimatedArrivalTimeVisibility": {
"remainingDrivingDistanceMetersThreshold": 5000
},
"remainingStopCountVisibility": {
"never": true
}
}
Polilinee e regole di visibilità della posizione dei veicoli
Le polilinee del percorso non sono visibili a meno che non sia presente anche la posizione del veicolo visible; altrimenti la posizione del veicolo può essere dedotta polilinea.
Queste linee guida ti aiutano a fornire una combinazione valida per il percorso le opzioni di visibilità della polilinea 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 su Non visibili mai. | |
L'opzione di visibilità è una delle seguenti:
|
Imposta le opzioni della polilinea della route 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 sia la posizione del veicolo le opzioni di visibilità delle polilinee siano soddisfatte. Ad esempio: "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingDrivingDistanceMetersThreshold": 3000 }, } In questo esempio, la posizione del veicolo è visibile solo se le restanti il numero di fermate è almeno 3 E il numero di tappe rimanenti è è di almeno 3000 metri. |
Disattiva adattamento automatico
Puoi impedire alla mappa di adattarsi automaticamente all'area visibile al veicolo e il percorso previsto disattivando il montaggio automatico. Nell'esempio che segue mostra come disattivare l'adattamento automatico quando configuri la condivisione del percorso visualizzazione mappa.
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,
...
});