Configura una mappa

Seleziona la piattaforma: Android iOS

Per seguire un percorso nella tua app per utenti finali, devi prima definire una mappa e aggiungere il supporto per le mappe vettoriali, se necessario.

Per configurare una mappa nella tua app, segui questi passaggi:

  1. Definisci un frammento di mappa per seguire un percorso.
  2. Aggiungi il supporto per un livello di base delle mappe e un controller di visualizzazione.
  3. Aggiungi il supporto per la grafica vettoriale Android per visualizzare le mappe vettoriali, se necessario.

Dopo aver definito una mappa, puoi aggiungere altre visualizzazioni e controlli della videocamera per personalizzare l'esperienza visiva. Per maggiori dettagli, consulta Definisci lo stile di una mappa.

Passaggio 1: definisci un frammento di mappa per seguire un percorso

Per definire una mappa, aggiungi un frammento o una visualizzazione della mappa per creare la mappa in cui condividi una corsa on-demand nella tua app per utenti finali. Per definire la mappa, segui uno di questi metodi:

  • ConsumerMapFragment: utilizza questo elemento per definire la mappa con un Fragment.

  • ConsumerMapView: utilizza questo attributo per definire una mappa con un View.

Le funzionalità sono le stesse per entrambi i metodi, quindi scegli quello più adatto alla tua applicazione.

Entrambi i metodi sono spiegati in modo più dettagliato nella sezione seguente.

Aggiungi un frammento o una visualizzazione di mappa

Per creare una mappa per visualizzare l'avanzamento della corsa utilizzando un frammento o una visualizzazione Android, segui questi passaggi e fai riferimento agli esempi di codice.

  1. Definisci un frammento o una visualizzazione nel file XML del layout dell'applicazione che si trova in /res/layout. Definisci la mappa del percorso come frammento utilizzando ConsumerMapFragment o come visualizzazione utilizzando ConsumerMapView.

    Il frammento o la visualizzazione fornisce quindi l'accesso alla mappa del percorso a cui la tua app può accedere e che può modificare. La mappa fornisce anche un handle per ConsumerController, che consente alla tua app di controllare e personalizzare l'esperienza del consumatore.

  2. Dal metodo onCreate(), chiama getConsumerGoogleMapAsync(callback), che restituisce ConsumerGoogleMap in modo asincrono nel callback.

  3. Utilizza ConsumerGoogleMap per visualizzare l'avanzamento della corsa e aggiornalo in base alle tue esigenze.

Esempio di come aggiungere ConsumerMapFragment

  1. Definisci il frammento nel file XML del layout dell'applicazione, come mostrato nell'esempio di codice seguente.

    <fragment
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
    android:id="@+id/consumer_map_fragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

  2. Effettua una chiamata a getConsumerGoogleMapAsync() dal metodo onCreate().

Java

 public class SampleAppActivity extends AppCompatActivity {

   @Override
   protected void onCreate(Bundle savedInstanceState) {

     // Find the ConsumerMapFragment.
     ConsumerMapFragment consumerMapFragment =
         (ConsumerMapFragment) fragmentManager.findFragmentById(R.id.consumer_map_fragment);

     // Initiate the callback that returns the map.
     if (consumerMapFragment != null) {
       consumerMapFragment.getConsumerGoogleMapAsync(
           new ConsumerMapReadyCallback() {
             // The map returned in the callback is used to access the ConsumerController.
             @Override
             public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
               ConsumerController consumerController = consumerGoogleMap.getConsumerController();
             }
           });
     }
   }

 }

Kotlin

 class SampleAppActivity : AppCompatActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
     // Find the ConsumerMapFragment.
     val consumerMapFragment =
       fragmentManager.findFragmentById(R.id.consumer_map_fragment) as ConsumerMapFragment

     consumerMapFragment.getConsumerGoogleMapAsync(
       object : ConsumerMapReadyCallback() {
         override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
           val consumerController = consumerGoogleMap.getConsumerController()!!
         }
       }
     )
   }
 }

Esempio di come aggiungere ConsumerMapView

  1. Utilizza la visualizzazione in un frammento o in un'attività, come definito nel file XML.

     <com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapView
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/consumer_map_view"
     android:layout_width="match_parent"
     android:layout_height="match_parent" />

  2. Chiama getConsumerGoogleMapAsync() da onCreate(). Oltre al parametro di callback, includi i seguenti dettagli:

    • L'attività o il frammento contenitore. La classe base dell'attività o del frammento deve essere rispettivamente FragmentActivity o un Fragment di supporto, poiché forniscono l'accesso al relativo ciclo di vita.

    • GoogleMapOptions (che può essere null), contenente gli attributi di configurazione per MapView.

Java

public class SampleAppActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    ConsumerMapView mapView = findViewById(R.id.consumer_map_view);

    if (mapView != null) {
      mapView.getConsumerGoogleMapAsync(
          new ConsumerMapReadyCallback() {
            // The map returned in the callback is used to access the ConsumerController.
            @Override
            public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
              ConsumerController consumerController = consumerGoogleMap.getConsumerController();
            }
          }, this, null);
    }
  }

}

Kotlin

class SampleAppActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

    mapView.getConsumerGoogleMapAsync(
      object : ConsumerMapReadyCallback() {
        // The map returned in the callback is used to access the ConsumerController.
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          val consumerController = consumerGoogleMap.getConsumerController()!!
        }
      },
      /* fragmentActivity= */ this,
      /* googleMapOptions= */ null,
    )
  }
}

Un MapView in un frammento è uguale a quello dell'esempio precedente per MapView in un'attività, con la differenza che il frammento espande il layout che include il MapView nel metodo onCreateView() del frammento.

Java

public class MapViewInFragment extends Fragment {

  @Override
  public View onCreateView(
      @NonNull LayoutInflater layoutInflater,
      @Nullable ViewGroup viewGroup,
      @Nullable Bundle bundle) {
    return layoutInflater.inflate(R.layout.consumer_map_view, viewGroup, false);
  }

}

Kotlin

class MapViewInFragment : Fragment() {
  override fun onCreateView(
    layoutInflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?,
  ): View {
    return layoutInflater.inflate(R.layout.consumer_map_view, viewGroup, false)
  }
}

Passaggio 2: aggiungi il supporto per un livello di base delle mappe e un controller di visualizzazione

Per condividere l'avanzamento del percorso nella tua app, aggiungi le seguenti classi all'app: ConsumerGoogleMap e ConsumerController.

  • Recupera ConsumerGoogleMap da ConsumerMapFragment o ConsumerMapView, che restituiscono entrambi in modo asincrono ConsumerGoogleMap in ConsumerMapReadyCallback.

    ConsumerGoogleMap è una classe wrapper per la classe GoogleMap. Utilizza un'API equivalente a GoogleMap in modo che la tua app possa interagire con la mappa. In questo modo, la tua app può interagire perfettamente con la stessa mappa Google sottostante. Ad esempio, GoogleMap consente una sola registrazione di callback, mentre ConsumerGoogleMap supporta due callback registrati. Questi callback consentono alla tua app di registrare i callback che vengono chiamati in sequenza.

  • Ottieni ConsumerController da ConsumerGoogleMap in getConsumerController().

    ConsumerController fornisce l'accesso alle funzionalità di condivisione del percorso, come il monitoraggio dei percorsi, il controllo dello stato del percorso e l'impostazione delle località.

Per scoprire come aggiungere ConsumerGoogleMap e ConsumerController alla tua app in Java e Kotlin, consulta i seguenti esempi.

Java

private ConsumerGoogleMap consumerGoogleMap;
private ConsumerController consumerController;
private ConsumerMapView consumerMapView;

consumerMapView.getConsumerGoogleMapAsync(
    new ConsumerMapReadyCallback() {
      @Override
      public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerMap) {
        consumerGoogleMap = consumerMap;
        consumerController = consumerMap.getConsumerController();
      }
    },
    this, null);

Kotlin

var consumerGoogleMap: ConsumerGoogleMap
var consumerController: ConsumerController
val consumerMapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

consumerMapView.getConsumerGoogleMapAsync(
  object : ConsumerMapReadyCallback() {
    override fun onConsumerMapReady(consumerMap: ConsumerGoogleMap) {
      consumerGoogleMap = consumerMap
      consumerController = consumerMap.getConsumerController()
    },
    /* fragmentActivity= */ this,
    /* googleMapOptions= */ null,
  }
)

Passaggio 3: aggiungi il supporto per la grafica vettoriale Android

Se il design della tua app richiede il supporto della grafica vettoriale, aggiungi il supporto per i dispositivi Android e i drawable vettoriali seguendo questi passaggi:

  1. Aggiungi il seguente codice alla tua attività. Questo codice estende AppCompatActivity per utilizzare i drawable vettoriali nell'SDK Consumer.

Java

// ...
import android.support.v7.app.AppCompatActivity;

// ...

public class ConsumerTestActivity extends AppCompatActivity {
  // ...
}

Kotlin

// ...
import android.support.v7.app.AppCompatActivity

// ...

class ConsumerTestActivity : AppCompatActivity() {
  // ...
}

Passaggi successivi

Segui un percorso in Android

Applica uno stile a una mappa