Definizione di una mappa

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

• Utilizzare la personalizzazione delle mappe basata su cloud
• Impostare le opzioni di stile della mappa direttamente nel codice

Personalizzare la mappa con la personalizzazione delle mappe basata su cloud

Personalizza l'aspetto del componente delle mappe utilizzando la personalizzazione delle mappe basata su cloud. Puoi creare e modificare gli stili delle mappe nella console Google Cloud per qualsiasi delle tue app che utilizzano Google Maps, senza richiedere alcuna modifica al codice. Per ulteriori informazioni, consulta Personalizzazione delle mappe basata su cloud.

Sia la classe ConsumerMapView che la classe ConsumerMapFragment supportano la personalizzazione delle mappe basata su cloud. Per utilizzare la personalizzazione delle mappe basata su cloud, assicurati che il visualizzatore delle mappe selezionato sia LATEST. Le sezioni che seguono mostrano esempi di come utilizzare lo stile delle mappe basate su cloud con il tuo progetto.

ConsumerMapView

Per utilizzare lo stile delle mappe basato su cloud in ConsumerMapView, imposta il campo mapId su GoogleMapOptions e passa GoogleMapOptions a getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) o 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 in 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 codice XML in ConsumerMapFragment, aggiungi l'attributo XML map:mapId con il valore mapId specificato. Vedi l'esempio di seguito:

<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"/>

Dinamicamente con newInstance

Per utilizzare la personalizzazione delle mappe basata su cloud con newInstance in ConsumerMapFragment, imposta il campo mapId su GoogleMapOptions e passa il GoogleMapOptions a newInstance. Vedi l'esempio di seguito:

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 mappa di condivisione dei viaggi dei consumatori in JavaScript, specifica un mapId e qualsiasi altro mapOptions quando crei il JourneySharingMapView.

Nota: non puoi modificare o aggiungere un mapId dopo l'inizializzazione di 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.
});

Definire lo stile delle mappe direttamente nel 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 mappa. Per saperne di più sulle opzioni di mappa che puoi impostare, consulta mapOptions nel riferimento all'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 della scheda sulla mappa utilizzando le regole di visibilità.

Nota: gli indicatori di posizione sono sempre visibili sulla mappa. Ad esempio, la località di consegna di una spedizione viene sempre visualizzata sulla mappa, indipendentemente dallo stato della consegna. Tuttavia, puoi personalizzare l'aspetto di questi indicatori. Consulta Personalizzare gli indicatori.

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 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à per molte attività, ma non per 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	Utilizzato per le soste del conducente e il rifornimento. Se un percorso per un'attività di consegna contiene anche un'altra fermata del veicolo, questa fermata non viene visualizzata se contiene solo attività di mancata disponibilità. L'ora di arrivo stimata e il tempo di completamento stimato dell'attività vengono comunque visualizzati per l'attività di consegna.
Aprire attività relative ai veicoli	Visibile	Sì	La visibilità termina quando l'attività viene completata o annullata. Puoi personalizzare la visibilità delle attività relative ai veicoli aperte. Vedi Personalizzare la visibilità delle attività del veicolo aperte.
Attività relative a veicoli chiusi	Non visibile	No	Non puoi personalizzare la visibilità delle attività relative ai veicoli chiuse.

Personalizzare la visibilità delle attività relative ai veicoli aperte

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 Tempo stimato di arrivo Tempo di completamento stimato dell'attività	Distanza in auto rimanente per raggiungere l'attività Conteggio delle fermate rimanenti Posizione del veicolo

Opzioni di visibilità per attività

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

Opzioni di visibilità
Conteggio delle fermate rimanenti Durata fino all'orario di arrivo stimato Distanza di guida rimanente	Sempre visibile Mai visibile

Nota: a un determinato elemento di dati può essere associata una sola opzione di visibilità. Non è possibile combinare i criteri utilizzando OR o AND.

A titolo esemplificativo, supponiamo che una personalizzazione di esempio modifichi la visibilità di tre elementi di dati utilizzando i criteri riportati nella tabella seguente. Tutti gli altri elementi rispettano le regole di visibilità predefinite.

Elemento dati da regolare	Visibilità	Criterio
Polilinea del percorso	Mostra	Il veicolo si trova a meno di 3 fermate.
ETA	Mostra	La distanza in auto rimanente è inferiore a 5000 metri.
Conteggio delle fermate rimanenti	Non mostrare mai	Il veicolo si trova a meno di 3 fermate.

L'esempio seguente mostra questa configurazione:

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

Nota: puoi anche personalizzare le opzioni di visibilità predefinite per il tuo progetto contattando il team di assistenza.

Polilinee dei percorsi e regole di visibilità della posizione del veicolo

I polilinei del percorso non possono essere visibili a meno che non sia visibile anche la posizione del veicolo; in caso contrario, la posizione del veicolo può essere dedotta dalla fine di un polilinea.

Punto chiave: le regole di visibilità dei polilinei del percorso devono essere ugualmente restrittive o più restrittive rispetto alle regole di visibilità per la posizione del veicolo.

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

Stesse opzioni di visibilità	Criterio di visibilità	Consulenza
	Le opzioni delle polilinee del percorso impostate su sempre visibili.	Imposta la posizione del veicolo su sempre visibile.
	La posizione del veicolo è impostata su Mai visibile.	Imposta i polilinei del percorso su non visibili.
	L'opzione di visibilità può essere una delle seguenti: numero di fermate rimanenti durata fino all'orario di arrivo stimato distanza di guida rimanente	Imposta le opzioni del 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ò accade solo quando entrambe le opzioni di visibilità della posizione del veicolo e del polilinea sono soddisfatte. 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 è di almeno 3000 metri.

Disattivare la regolazione automatica

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 della mappa per la 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

• Personalizzare gli indicatori
• Personalizzare le polilinee