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 di visualizzazione mappa. Consulta: Gestire gli eventi di visualizzazione mappa
Devi anche aver configurato i servizi di backend necessari all'SDK consumer, e configurare l'SDK consumer. 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 Applicare uno stile alla mappa.
Regolare lo zoom della fotocamera. Puoi utilizzare la funzionalità integrata o impostarne uno personalizzato. fotocamere per mettere a fuoco il 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 corsoGMTCMapView
.
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, vedi 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 la Personalizzazione delle mappe basata su cloud in ConsumerMapView
, imposta la
campo mapId
su GoogleMapOptions
e passa il GoogleMapOptions
a
getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment,
GoogleMapOptions)
or 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 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 supera il
Da GoogleMapOptions
a newInstance
. Vedi il seguente esempio:
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 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 utilizzareAutoCamera
, 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 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 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.