La ConsumerMapStyle
dispone di metodi setter e getter che forniscono una personalizzazione dinamica
per indicatori e polilinee. Questa classe viene esposta in modo asincrono utilizzando
ConsumerController.getConsumerMapStyle()
.
La personalizzazione dell'interfaccia utente persiste a ogni rotazione dei dispositivi e rimane valida fino al
ConsumerController
è scollegato.
Indicatori personalizzati
Il metodo per impostare il tipo di indicatore e le sue proprietà è ConsumerMapStyle.setMarkerStyleOptions()
. La tua
Le opzioni degli indicatori sostituiscono i valori predefiniti forniti dall'SDK consumer.
Per ripristinare i valori predefiniti, chiama setMarkerStyleOptions()
utilizzando null
per il parametro MarkerOptions
. Recupera MarkerOptions
attivo
utilizzando
getMarkerStyleOptions()
Tipi di indicatori
I seguenti indicatori sono disponibili per la personalizzazione:
TRIP_PICKUP_POINT
TRIP_DROPOFF_POINT
TRIP_INTERMEDIATE_DESTINATION
TRIP_VEHICLE
Vengono visualizzati TRIP_PICKUP_POINT
e TRIP_DROPOFF_POINT
durante il monitoraggio della corsa.
Viene visualizzato TRIP_VEHICLE
durante il monitoraggio della corsa. L'icona dell'indicatore rimane invariata
in base al tipo di veicolo
effettivo per la corsa. L'SDK consumer si aggiorna
la rotazione dell'icona TRIP_VEHICLE
durante il monitoraggio della corsa per simulare
comportamento del veicolo durante il tragitto.
Opzioni dell'indicatore
Le proprietà personalizzabili disponibili per ciascun indicatore sono l'insieme
strutture fornite da Google Maps
MarkerOptions
MarkerOptions
viene creato utilizzando il relativo costruttore e le proprietà personalizzate sono specificate mediante il parametro "Setter" di stile.
I valori predefiniti sono forniti per ogni proprietà, quindi devi solo specificare valori personalizzati.
Puoi disattivare un indicatore impostando visible
su false
.
Devi fornire una quantità di dati sufficiente per consentirti di utilizzare il tuo elemento UI al suo posto.
Esempio
Java
// Initializing marker options.
consumerController
.getConsumerMapStyle()
.addOnSuccessListener(
consumerMapStyle -> {
consumerMapStyle.setMarkerStyleOptions(
MarkerType.TRIP_VEHICLE,
new MarkerOptions()
.visible(false));
});
// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null);
Kotlin
// Initializing marker options.
consumerController
.getConsumerMapStyle()
.addOnSuccessListener({ consumerMapStyle ->
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, MarkerOptions().visible(false))
})
// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null)
Polilinee personalizzate
La personalizzazione delle polilinee viene impostata utilizzando il metodo ConsumerMapStyle.setPolylineStyleOptions
. Impostazione delle opzioni della polilinea personalizzate
sostituisce i valori predefiniti forniti dall'SDK consumer. I valori predefiniti
può essere ripristinato chiamando il numero setPolylineStyleOptions
con null per il parametro PolylineOptions
. Lo stato attivo
Puoi recuperare PolylineOptions
utilizzando il metodo
getPolylineStyleOptions
.
Tipi di polilinea
I seguenti tipi di polilinea sono disponibili per la personalizzazione:
ACTIVE_ROUTE
REMAINING_ROUTE
ACTIVE_ROUTE
e REMAINING_ROUTE
vengono visualizzati durante il monitoraggio della corsa e
rappresentano il percorso del veicolo.
Proprietà polilinea
Le proprietà personalizzabili disponibili per ogni polilinea sono fornite da Google Maps PolylineOptions
.
PolylineOptions
viene creato utilizzando il relativo costruttore e le proprietà personalizzate sono specificate mediante il parametro "Setter" di stile. Valori predefiniti
vengono forniti per ogni proprietà, quindi devi solo specificare valori personalizzati.
Puoi disattivare la polilinea impostando visible
su false
.
Esempio
Java
// Initializing polyline style options.
consumerController
.getConsumerMapStyle()
.addOnSuccessListener(
consumerMapStyle -> {
consumerMapStyle.setPolylineStyleOptions(
PolylineType.ACTIVE_ROUTE,
new PolylineOptions()
.visible(false));
});
// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);
Kotlin
// Initializing polyline options.
consumerController
.getConsumerMapStyle()
.addOnSuccessListener({ consumerMapStyle ->
consumerMapStyle.setPolylineStyleOptions(
PolylineType.ACTIVE_ROUTE,
PolylineOptions().visible(false)
)
})
// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)
Percorso attivo e rimanente
Con le funzionalità di avanzamento dei viaggi e degli ordini attivate, la tua app può personalizzare esperienza dell'utente utilizzando polilinee che mostrano i veicoli attivi e rimanenti percorso.
Il percorso attivo è il percorso che il veicolo sta attualmente per raggiungere. la tappa successiva nella corsa attiva del consumatore. Il percorso rimanente è il percorso del veicolo oltre il percorso attivo. Quando il percorso attivo la tappa è l'ultima tappa del viaggio, la tappa restante non esiste.
Le polilinee attive e rimanenti possono essere personalizzate e controllate sulla visibilità dalla tua app. Per impostazione predefinita, il percorso attivo è visibile, mentre quello rimanente non è visibile.
Esempio
Java
// Initializing polyline options.
consumerController
.getConsumerMapStyle()
.addOnSuccessListener(
consumerMapStyle -> {
consumerMapStyle.setPolylineStyleOptions(
PolylineType.ACTIVE_ROUTE,
new PolylineOptions()
.color(Color.BLUE));
consumerMapStyle.setPolylineStyleOptions(
PolylineType.REMAINING_ROUTE,
new PolylineOptions()
.color(Color.BLACK)
.width(5)
.visible(true));
});
// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);
consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null);
Kotlin
// Initializing polyline options.
consumerController
.getConsumerMapStyle()
.addOnSuccessListener({ consumerMapStyle ->
{
consumerMapStyle.setPolylineStyleOptions(
PolylineType.ACTIVE_ROUTE,
PolylineOptions().color(Color.BLUE)
)
consumerMapStyle.setPolylineStyleOptions(
PolylineType.REMAINING_ROUTE,
PolylineOptions().color(Color.BLACK).width(5).visible(true)
)
}
})
// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)
consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null)
Polilinee sensibili al traffico
Il livello di traffico della polilinea è disattivato per impostazione predefinita. Quando è abilitato, i segmenti che rappresentano tratti di traffico non normale sono tracciati sopra la polilinea del percorso. in z-index PolylineOptions.getZIndex() più un offset che dipende dalle condizioni del traffico.
Le condizioni del traffico sono rappresentate da uno dei seguenti quattro tipi di velocità. Puoi personalizzare il colore per ogni tipo di velocità.
Per attivare le "Polilinee sensibili al traffico", devi creare un oggetto TrafficStyle
che verrà passato a ConsumerMapStyle
chiamando setPolylineTrafficStyle()
.
Esempio
Java
// TrafficStyle is part of the Consumer SDK.
TrafficStyle trafficStyle = TrafficStyle.builder()
.setTrafficVisibility(true)
.setTrafficColor(SpeedType.NO_DATA, Color.GREY)
.setTrafficColor(SpeedType.NORMAL_VALUE, Color.BLUE)
.setTrafficColor(SpeedType.SLOW_VALUE, Color.ORANGE)
.setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
.build();
consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle);
Kotlin
// TrafficStyle is part of the Consumer SDK.
val trafficStyle =
TrafficStyle.builder()
.setTrafficVisibility(true)
.setTrafficColor(SpeedType.NO_DATA, Color.GREY)
.setTrafficColor(SpeedType.NORMAL_VALUE, Color.BLUE)
.setTrafficColor(SpeedType.SLOW_VALUE, Color.ORANGE)
.setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
.build()
consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle)
Regolare lo zoom della fotocamera per mettere a fuoco un percorso
Il pulsante La mia posizione predefinito integrato nell'SDK di Maps centra la fotocamera sulla posizione del dispositivo. Se c'è una sessione di avanzamento viaggi e ordini attiva, ti consigliamo di centrare fotocamera per inquadrare il viaggio piuttosto che la posizione del dispositivo.
Soluzione integrata SDK consumer per Android: fotocamera automatica
SDK Consumer SDK per consentirti di concentrarti sul percorso anziché sulla posizione del dispositivo fornisce una funzione Fotocamera automatica abilitata per impostazione predefinita. Lo zoom della fotocamera per concentrarti sul percorso di avanzamento dei viaggi e degli ordini e sulla tappa successiva del viaggio.
Personalizzazione del comportamento della videocamera
Se hai bisogno di un maggiore controllo sul comportamento della videocamera, puoi disattivare o attivare
Fotocamera automatica con ConsumerController.setAutoCameraEnabled()
.
ConsumerController.getCameraUpdate()
restituisce i limiti consigliati per la fotocamera in quel momento. Puoi
fornisci questo CameraUpdate
come argomento a
GoogleMap.moveCamera()
o GoogleMap.animateCamera()
.
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
. I seguenti esempi mostrano 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 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
}
}