Definizione di una mappa

Questa guida descrive i modi in cui puoi applicare uno stile alla 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 per utenti finali con le seguenti implementazioni:

• Una visualizzazione mappa. Consulta Inizializzare la visualizzazione mappa.

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

Devi anche aver configurato i servizi di backend necessari per Consumer SDK e Consumer SDK. Per maggiori dettagli, consulta Configurare Consumer SDK e Che cos'è Fleet Engine?.

Personalizzazioni della mappa

Le personalizzazioni disponibili sono le seguenti:

• Applicare uno stile alla mappa: puoi applicare uno stile ai colori della mappa, alle polilinee e ad altre funzionalità della mappa utilizzando la personalizzazione delle mappe basata su cloud. Consulta Applicare uno stile alla mappa.

• Regolare lo zoom della fotocamera: puoi utilizzare la funzionalità integrata o impostare le tue opzioni della fotocamera per concentrarti su un percorso. Consulta Regolare lo zoom della fotocamera per concentrarsi su un viaggio.

• Personalizzare indicatori e polilinee: puoi aggiungere indicatori personalizzati e polilinee di percorso al design della tua app. Questi elementi di design consentono alla tua app per i consumatori di mostrare un'anteprima dinamica del percorso del veicolo. Consulta Personalizzare gli indicatori e Personalizzare le polilinee.

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

Applicare uno stile alla 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 delle mappe nella console Google Cloud per qualsiasi app che utilizzi Google Maps, senza richiedere modifiche al codice. Per maggiori 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 che seguono mostrano esempi di come utilizzare la personalizzazione delle mappe basata su cloud con il tuo progetto.

ConsumerMapView

Per utilizzare la personalizzazione delle mappe basata su cloud in ConsumerMapView, imposta il mapId campo su GoogleMapOptions e passa il 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:

• Staticamente con XML.
• Dinamicamente con newInstance.

Staticamente con XML

Per utilizzare la personalizzazione delle mappe basata su cloud con XML in the ConsumerMapFragment, aggiungi the map:mapId attributo XML con the specified 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"/>

Dinamicamente 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 il seguente esempio:

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

Regolare lo zoom della fotocamera per concentrarsi su un viaggio

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

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

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

AutoCamera centra la fotocamera per impostazione predefinita

Consumer SDK fornisce una funzionalità AutoCamera che è attivata per impostazione predefinita sul pulsante integrato La mia posizione per Maps SDK. La fotocamera esegue lo zoom per concentrarsi sul percorso del viaggio e sulla tappa successiva del viaggio.

Se vuoi utilizzare AutoCamera, assicurati che sia attivata. Per maggiori dettagli, consulta allowCameraAutoUpdate.

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

Personalizzare il comportamento della fotocamera

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

Disattiva o attiva AutoCamera con la AllowCameraAutoUpdate proprietà.

Per ulteriori personalizzazioni della fotocamera, consulta Spostare la fotocamera nella documentazione di Maps SDK for iOS.

Passaggi successivi

Seguire un viaggio su iOS