Questa guida descrive i modi in cui puoi definire lo stile della mappa visualizzata nell'app per iOS durante un viaggio.
Prima di iniziare
Prima di applicare uno stile a una mappa, devi avere un'app per i consumatori con quanto segue implementato:
Una visualizzazione mappa. Consulta Inizializzare la visualizzazione mappa.
Un modo per gestire gli eventi di visualizzazione della mappa. Consulta la sezione 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, vedi Configurare l'SDK consumer e Che cos'è Fleet Engine?.
Personalizzazioni mappa
Le personalizzazioni disponibili sono le seguenti:
Applica uno stile alla mappa: puoi applicare uno stile ai colori, alle polilinee e ad altri elementi della mappa utilizzando la Personalizzazione delle mappe basata su cloud. Consulta Applicare 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 Regolare lo zoom della fotocamera per mettere a fuoco un viaggio.
Personalizza indicatori e polilinee: puoi aggiungere indicatori personalizzati e polilinee di percorso al design dell'app. Questi elementi di design consentono all'app consumer di visualizzare un'anteprima dinamica del percorso del veicolo. Vedi Personalizzare gli indicatori e Personalizzare le polilinee.
L'SDK fornisce queste opzioni tramite la proprietà
consumerMapStyleCoordinator. Questa proprietà è disponibile tramite il corsoGMTCMapView.
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 la sezione 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"/>
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 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
}
}
Regola lo zoom della fotocamera per mettere a fuoco un percorso
Durante una sessione di condivisione della corsa attiva, è utile che l'utente abbia una visione più ampia del veicolo lungo il tragitto anziché un'inquadratura ravvicinata del veicolo lungo un percorso. Per farlo, regola il livello di zoom della fotocamera utilizzando AutoCamera integrato o personalizzando autonomamente il comportamento della fotocamera come segue:
AutoCamera: se vuoi utilizzareAutoCamera, non devi fare nulla. Per impostazione predefinita, la videocamera segue il viaggio.Personalizza il comportamento della videocamera: per personalizzare il comportamento della videocamera, devi disattivare
AutoCamerae poi effettuare le personalizzazioni.
AutoCamera centra la fotocamera 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 esegue lo zoom per
mettere a fuoco il percorso del viaggio e la tappa successiva.
Se vuoi utilizzare AutoCamera, assicurati che sia attivato. Per maggiori dettagli, vedi
allowCameraAutoUpdate.
Per maggiori dettagli sul pulsante La mia posizione per Maps SDK, consulta la sezione 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 la proprietà AllowCameraAutoUpdate.
Per altre personalizzazioni della fotocamera, consulta Spostare la fotocamera nella documentazione di Maps SDK for iOS.