Definizione di una mappa

Questa guida descrive i modi in cui puoi definire lo stile della mappa viene visualizzato nell'app per iOS quando segui un viaggio.

Prima di iniziare

Prima di applicare uno stile a una mappa, devi avere un'app consumer con ha implementato quanto segue:

• Una visualizzazione mappa. Consulta Inizializzare la visualizzazione mappa.

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

Inoltre, devi aver configurato i servizi di backend di cui ha bisogno l'SDK Consumer e l'SDK Consumer stesso. Per maggiori dettagli, consulta Configurare l'SDK consumer e Che cos'è Fleet Engine?.

Personalizzazioni mappa

Le personalizzazioni disponibili sono le seguenti:

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

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

• Personalizzare indicatori e polilinee: puoi aggiungere indicatori e percorsi personalizzati polilinee alla progettazione dell'app. Questi elementi di design consentono per visualizzare un'anteprima dinamica del percorso del veicolo. Consulta Personalizzare gli indicatori e Personalizzare le polilinee.

  L'SDK fornisce queste opzioni tramite consumerMapStyleCoordinator proprietà. Questa proprietà è disponibile tramite il corso GMTCMapView.

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, consulta 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 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

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

Regola lo zoom della fotocamera per mettere a fuoco un percorso

Durante una sessione di condivisione attiva del percorso, è utile che l'utente veda un'inquadratura più ampia del veicolo lungo il tragitto anziché un primo piano. la prospettiva del veicolo su un percorso. A questo scopo, regoli lo zoom della fotocamera livello usando la AutoCamera integrata o personalizzando il comportamento della videocamera nel seguente modo:

• AutoCamera: se vuoi utilizzare AutoCamera, non devi fare qualsiasi cosa. Per impostazione predefinita, la fotocamera segue il percorso.

• Personalizza 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 fotocamera aumenta lo zoom fino a concentrarsi sul percorso di condivisione del viaggio e sulla tappa successiva del viaggio.

Se vuoi utilizzare AutoCamera, assicurati che sia attivato. Per ulteriori 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.

Personalizza il comportamento della videocamera

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

Disattiva o attiva AutoCamera con AllowCameraAutoUpdate proprietà.

Per ulteriori personalizzazioni della fotocamera, vedi Spostare la videocamera nella documentazione di Maps SDK per iOS.

Passaggi successivi

Seguire un percorso su iOS