Definizione di una mappa

Questa guida descrive i modi in cui puoi personalizzare lo stile della mappa visualizzata nella tua app per iOS quando segui un viaggio.

Prima di iniziare

Prima di applicare uno stile a una mappa, devi avere un'app consumer con implementate le seguenti funzionalità:

• Una visualizzazione mappa. Consulta Inizializzare la visualizzazione mappa.

• Un modo per gestire gli eventi di visualizzazione della mappa. Consulta Gestire gli eventi di visualizzazione della mappa

Devi anche configurare i servizi di backend necessari per Consumer SDK e configurare Consumer SDK. Per maggiori dettagli, vedi Configurare l'SDK consumer e Che cos'è Fleet Engine?

Personalizzazioni della mappa

Le personalizzazioni disponibili sono le seguenti:

• Applica uno stile alla mappa: puoi applicare uno stile ai colori della mappa, alle polilinee e ad altri elementi della mappa utilizzando la personalizzazione delle mappe basata su cloud. Consulta Applica uno stile alla mappa.

• Regola lo zoom della videocamera: puoi utilizzare la funzionalità integrata o impostare le tue opzioni della videocamera per concentrarti su un viaggio. Consulta la sezione Regolare lo zoom della videocamera per mettere a fuoco un viaggio.

• Personalizza indicatori e polilinee: puoi aggiungere indicatori personalizzati e polilinee dell'itinerario al design della tua app. Questi elementi di design consentono all'app Consumer di mostrare un'anteprima dinamica dell'itinerario del veicolo. Consulta Personalizzare i marcatori e Personalizzare le polilinee.

  L'SDK fornisce queste opzioni tramite la proprietà consumerMapStyleCoordinator. Questa proprietà è disponibile tramite la classe GMTCMapView.

Personalizzare lo stile della mappa con la personalizzazione delle mappe basata su cloud

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

Le classi ConsumerMapView e ConsumerMapFragment supportano la personalizzazione delle mappe basata su cloud. Per utilizzare la personalizzazione delle mappe basata su cloud, assicurati che il renderer delle mappe selezionato sia LATEST. Le sezioni seguenti mostrano esempi di come utilizzare lo stile delle mappe basato sul cloud con il tuo progetto.

ConsumerMapView

Per utilizzare lo stile delle mappe basato sul cloud in ConsumerMapView, imposta il campo mapId su GoogleMapOptions e passa GoogleMapOptions a getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) o getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions)

Esempio

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

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

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 passa GoogleMapOptions a newInstance. Vedi l'esempio di seguito:

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

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
  }
}

Regola lo zoom della videocamera per mettere a fuoco un viaggio

Durante una sessione di condivisione del viaggio attiva, è utile che l'utente veda una visualizzazione più ampia del veicolo durante il suo percorso, anziché una prospettiva ravvicinata del veicolo su un percorso. Per farlo, regola il livello di zoom della videocamera utilizzando AutoCamera integrato o personalizzando il comportamento della videocamera come segue:

• AutoCamera: se vuoi utilizzare AutoCamera, non devi fare nulla. Per impostazione predefinita, la videocamera segue il viaggio.

• Personalizzare il comportamento della videocamera: per personalizzare il comportamento della videocamera, devi disattivare AutoCamera e poi apportare le personalizzazioni.

AutoCamera centra la videocamera per impostazione predefinita

L'SDK Consumer fornisce una funzionalità AutoCamera attivata per impostazione predefinita sul pulsante La mia posizione integrato per Maps SDK. La videocamera esegue lo zoom per mettere a fuoco l'itinerario del viaggio e il waypoint successivo.

Se vuoi utilizzare AutoCamera, assicurati che sia attivato. Per maggiori dettagli, vedi allowCameraAutoUpdate.

Per informazioni dettagliate sul pulsante La mia posizione per Maps SDK, consulta Pulsante La mia posizione nella documentazione di Maps SDK per iOS.

Personalizzare il comportamento della videocamera

Per un maggiore controllo del comportamento della videocamera, puoi disattivare AutoCamera e personalizzare il comportamento della videocamera.

Disattiva o attiva AutoCamera con la proprietà AllowCameraAutoUpdate.

Per ulteriori personalizzazioni della videocamera, consulta Spostamento della videocamera nella documentazione di Maps SDK for iOS.

Passaggi successivi

Seguire un viaggio su iOS