Questa guida descrive i modi in cui puoi applicare uno stile alla mappa visualizzata nella tua app per iOS quando segui un percorso.
Prima di iniziare
Prima di applicare uno stile a una mappa, devi avere un'app per utenti finali con i seguenti elementi implementati:
Una visualizzazione mappa. Consulta Inizializza la visualizzazione mappa.
Un modo per gestire gli eventi di visualizzazione mappa. Consulta Gestisci gli eventi di visualizzazione della mappa.
Devi anche aver configurato i servizi di backend necessari per l'SDK Consumer e aver configurato l'SDK Consumer. Per maggiori dettagli, vedi Configura 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, 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 percorso. Consulta Regola lo zoom della videocamera per mettere a fuoco un percorso.
Personalizza indicatori e polilinee: puoi aggiungere indicatori e polilinee dei percorsi personalizzati al design della tua app. Questi elementi di design consentono all'app per utenti finali di visualizzare un'anteprima dinamica del percorso del veicolo. Consulta Personalizza gli indicatori e Personalizza le polilinee.
L'SDK fornisce queste opzioni tramite la proprietà
consumerMapStyleCoordinator. Questa proprietà è disponibile tramite la classeGMTCMapView.
Personalizza la mappa con la personalizzazione delle mappe basata su cloud
Personalizza l'aspetto del componente Maps 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 saperne di più, seleziona la tua piattaforma in Personalizzazione delle mappe basata su cloud.
Sia la classe ConsumerMapView sia la classe ConsumerMapFragment supportano lo stile delle mappe basato 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 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 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 l'XML.
- In modo dinamico con
newInstance.
In modo statico con l'XML
Per utilizzare la Personalizzazione delle mappe basata su cloud con l'XML nel
ConsumerMapFragment, aggiungi l'attributo XML map:mapId con l'attributo
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:
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 videocamera per mettere a fuoco un percorso
Durante una sessione di condivisione del percorso attiva, è utile per l'utente visualizzare
una vista più ampia del veicolo lungo il percorso, anziché una prospettiva
ravvicinata del veicolo su un itinerario. Per farlo, regola il livello di zoom della videocamera utilizzando la funzionalità AutoCamera integrata o personalizzando il comportamento della videocamera come segue:
AutoCamera: se vuoi utilizzareAutoCamera, non devi fare nulla. Per impostazione predefinita, la videocamera segue il percorso.Personalizza il comportamento della videocamera: per personalizzare il comportamento della videocamera, devi disattivare
AutoCamerae poi apportare le personalizzazioni.
AutoCamera centra la videocamera per impostazione predefinita
L'SDK Consumer fornisce una funzionalità AutoCamera abilitata per impostazione predefinita
sul pulsante La mia posizione integrato per l'SDK Maps. La videocamera aumenta lo zoom per mettere a fuoco il percorso del viaggio e il waypoint successivo.
Se vuoi utilizzare AutoCamera, assicurati che sia abilitato. 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.
Personalizza 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 fotocamera, consulta Spostamento della fotocamera nella documentazione di Maps SDK for iOS.