La ConsumerMapStyle
tiene métodos set y get que te ofrecen una personalización dinámica
para marcadores y polilíneas. Esta clase se expone de forma asíncrona mediante la clase
ConsumerController.getConsumerMapStyle()
.
La personalización de la IU persiste en todas las rotaciones del dispositivo y permanece vigente hasta que
ConsumerController
está desconectada.
Marcadores personalizados
El método para configurar el tipo de marcador y sus propiedades es ConsumerMapStyle.setMarkerStyleOptions()
. Tu configuración personalizada
Las opciones de marcadores anulan los valores predeterminados que proporciona el SDK de consumidor.
Para restablecer los valores predeterminados, llama a setMarkerStyleOptions()
con un valor nulo.
para el parámetro MarkerOptions
. Recupera los MarkerOptions
activos
mediante
getMarkerStyleOptions()
Tipos de marcadores
Los siguientes marcadores están disponibles para la personalización:
TRIP_PICKUP_POINT
TRIP_DROPOFF_POINT
TRIP_INTERMEDIATE_DESTINATION
TRIP_VEHICLE
Se muestran TRIP_PICKUP_POINT
y TRIP_DROPOFF_POINT
durante la supervisión de viajes.
Se muestra TRIP_VEHICLE
durante la supervisión de un viaje. El ícono del marcador no cambia
según el tipo de vehículo real para el viaje. El SDK del consumidor se actualiza
la rotación del ícono TRIP_VEHICLE
durante la supervisión de viajes para imitar el
el comportamiento del vehículo en su recorrido por la ruta.
Opciones del marcador
Las propiedades personalizables disponibles para cada marcador son el conjunto de
propiedades proporcionadas por Google Maps
MarkerOptions
MarkerOptions
se compila con su constructor, y las propiedades personalizadas se especifican con "Setter". métodos de estilo.
Se proporcionan valores predeterminados para cada propiedad, por lo que solo debes especificar valores personalizados.
Para desactivar un marcador, establece visible
en false
.
Debes proporcionar suficientes datos para que puedas usar tu propio elemento de la IU en su lugar.
Ejemplo
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)
Polilíneas personalizadas
La personalización de polilíneas se establece con el método ConsumerMapStyle.setPolylineStyleOptions
. Cómo configurar opciones personalizadas de polilíneas
anula los valores predeterminados que proporciona el SDK del consumidor. Los valores predeterminados
se puede restablecer llamando a setPolylineStyleOptions
con un valor nulo para el parámetro PolylineOptions
. Las campañas de generación de
PolylineOptions
se puede recuperar con el comando
getPolylineStyleOptions
.
Tipos de polilínea
Los siguientes tipos de polilíneas están disponibles para la personalización:
ACTIVE_ROUTE
REMAINING_ROUTE
Se muestran ACTIVE_ROUTE
y REMAINING_ROUTE
durante la supervisión de viajes y
Representan la ruta del vehículo.
Propiedades de las polilíneas
Google Maps PolylineOptions
proporciona las propiedades personalizables disponibles para cada polilínea.
PolylineOptions
se compila con su constructor, y las propiedades personalizadas se especifican con "Setter". métodos de estilo. Valores predeterminados
se proporcionan para cada propiedad, por lo que solo debes especificar valores personalizados.
Para desactivar la polilínea, establece visible
en false
.
Ejemplo
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)
Ruta activa y restante
Con el Progreso del viaje y el pedido habilitado, tu app puede personalizar la experiencia del usuario con polilíneas que muestran los vehículos activos y restantes ruta.
La ruta activa es el camino por el que el vehículo está viajando en este momento. el próximo punto de referencia en el viaje activo del consumidor. La ruta restante es la ruta que recorrerá el vehículo después de la ruta activa. Cuando la ruta activa El punto de referencia es el último punto de referencia del viaje; la ruta restante no existe.
Las polilíneas activas y restantes se pueden personalizar y controlar la visibilidad de tu app. De forma predeterminada, la ruta activa es visible, y la ruta restante se muestra no es visible.
Ejemplo
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)
Polilíneas adaptadas al tráfico
La capa de tráfico de la polilínea está inhabilitada de forma predeterminada. Cuando está habilitado, los segmentos que representan tramos de tráfico no normal se dibujan sobre la polilínea de la ruta en el índice z PolylineOptions.getZIndex() más un desplazamiento según las condiciones del tráfico.
Las condiciones del tráfico se representan cuatro tipos de velocidades. Puedes personalizar el color para cada tipo de velocidad.
Para habilitar las "polilíneas adaptadas al tráfico", debes construir un objeto TrafficStyle
que, luego, se pasará a ConsumerMapStyle
mediante una llamada a setPolylineTrafficStyle()
.
Ejemplo
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)
Cómo ajustar el zoom de la cámara para enfocar un viaje
El botón Mi ubicación predeterminado integrado en el SDK de Maps centra la cámara en la ubicación del dispositivo. Si hay una sesión activa de Progreso del viaje y el pedido, te recomendamos centrar el para que se enfoque en el viaje y no en la ubicación del dispositivo.
Solución integrada del SDK de consumidor para Android: AutoCamera
Para que puedas enfocarte en el recorrido, en lugar de en la ubicación del dispositivo, proporciona una función de Cámara automática habilitada de forma predeterminada. La cámara se acerca. para centrarse en la ruta del Progreso del viaje y el pedido, y en el próximo punto de referencia del viaje.
Cómo personalizar el comportamiento de la cámara
Si necesitas más control del comportamiento de la cámara, puedes inhabilitar o habilitar
Cámara automática con ConsumerController.setAutoCameraEnabled()
.
ConsumerController.getCameraUpdate()
muestra los límites de cámara recomendados en ese momento. Puedes
Luego, proporciona este CameraUpdate
como argumento para
GoogleMap.moveCamera()
o GoogleMap.animateCamera()
.
Diseño de mapas basado en Cloud
Tanto el
ConsumerMapView
y las
ConsumerMapFragment
clases admiten el diseño de mapas basado en Cloud.
Para usar el diseño de mapas basado en Cloud, asegúrate de que los mapas seleccionados
El procesador es LATEST
. En los siguientes ejemplos se muestra cómo usar
diseño de mapas basado en Cloud con tu proyecto.
ConsumerMapView
Para utilizar el diseño de mapas basado en Cloud en ConsumerMapView
, configura la
mapId
en GoogleMapOptions
y pasa GoogleMapOptions
a
getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment,
GoogleMapOptions)
or getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity,
GoogleMapOptions)
Ejemplo
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
Hay dos formas de utilizar el diseño de mapas basado en Cloud en ConsumerMapFragments:
- De forma estática, con el XML.
- De forma dinámica con
newInstance
De forma estática con el XML
Para utilizar el diseño de mapas basado en Cloud con el XML en el archivo
ConsumerMapFragment
, agrega el atributo XML map:mapId
con el valor especificado
mapId
Consulta el siguiente ejemplo:
<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"/>
De forma dinámica con newInstance
Para utilizar el diseño de mapas basado en Cloud con newInstance
en
ConsumerMapFragment
, configura el campo mapId
en GoogleMapOptions
y pasa el
GoogleMapOptions
a newInstance
. Consulta el siguiente ejemplo:
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
}
}