En este documento, se explica cómo personalizar el aspecto de un mapa y controlar la visibilidad de los datos y las opciones de viewport. Puedes hacerlo de las siguientes maneras:
- Cómo usar el diseño de mapas basado en la nube
- Configura las opciones de diseño del mapa directamente en tu propio código
Personaliza el mapa con el diseño de mapas basado en Cloud
Personaliza el aspecto del componente de mapas con el diseño de mapas basado en Cloud. Puedes crear y editar diseños de mapa en la consola de Google Cloud para cualquiera de tus apps que usen Google Maps, sin necesidad de hacer cambios en tu código. Para obtener más información, consulta Diseño de mapas basado en la nube.
Tanto las clases ConsumerMapView
como ConsumerMapFragment
admiten el diseño de mapas basado en Cloud.
Para usar el diseño de mapas basado en la nube, asegúrate de que el renderizador de mapas seleccionado sea LATEST
. En las siguientes secciones, se muestran ejemplos de cómo usar
los diseños de mapas basados en la nube con tu proyecto.
ConsumerMapView
Para usar el diseño de mapas basado en la nube en ConsumerMapView
, configura el campo mapId
en GoogleMapOptions
y pasa el GoogleMapOptions
a getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) o 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
Existen dos maneras de usar el diseño de mapas basado en la nube en ConsumerMapFragments:
- De forma estática con el XML.
- De forma dinámica con
newInstance
De forma estática con el XML
Para usar el diseño de mapas basado en la nube con el XML en ConsumerMapFragment
, agrega el atributo XML map:mapId
con el mapId
especificado. 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 usar el diseño de mapas basado en Cloud con newInstance
en ConsumerMapFragment
, configura el campo mapId
en GoogleMapOptions
y pasa 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
}
}
Para aplicar un diseño de mapa a tu mapa de uso compartido de viajes de consumidores de JavaScript, especifica un mapId
y cualquier otro mapOptions
cuando crees el JourneySharingMapView
.
En los siguientes ejemplos, se muestra cómo aplicar un diseño de mapa con un ID de mapa.
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
Aplica diseño a los mapas directamente en tu propio código
También puedes personalizar el diseño del mapa configurando las opciones de mapa cuando creas el JourneySharingMapView
. En los siguientes ejemplos, se muestra cómo aplicar diseño a un mapa con opciones de mapa. Para obtener más información sobre las opciones de mapa que puedes configurar, consulta mapOptions
en la referencia de la API de Google Maps JavaScript.
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
Controla la visibilidad de los datos de tareas para el SDK
Puedes controlar la visibilidad de ciertos objetos de tareas en el mapa con las reglas de visibilidad.
Visibilidad predeterminada de los datos de tareas
De forma predeterminada, los datos de las tareas asignadas a un vehículo son visibles cuando el vehículo se encuentra a 5 paradas de la tarea. La visibilidad finaliza cuando se completa o cancela la tarea.
En esta tabla, se muestra la visibilidad predeterminada para cada tipo de tarea. Puedes personalizar la visibilidad de muchas tareas, pero no de todas. Para obtener más detalles sobre los tipos de tareas, consulta Tipos de tareas en la guía Tareas programadas.
Tipo de tarea | Visibilidad predeterminada | ¿Es personalizable? | Descripción |
---|---|---|---|
Tareas de no disponibilidad | No visible | No | Se usa para las pausas del conductor y el reabastecimiento de combustible. Si una ruta a una tarea de entrega también contiene otra parada del vehículo, esa parada no se muestra si solo contiene tareas de no disponibilidad. La hora de llegada estimada y el tiempo estimado de finalización de la tarea de entrega aún se muestran para la tarea de entrega. |
Cómo abrir tareas del vehículo | Visible | Sí | La visibilidad finaliza cuando se completa o cancela la tarea. Puedes personalizar la visibilidad de las tareas abiertas del vehículo. Consulta Cómo personalizar la visibilidad de las tareas de vehículos abiertas. |
Tareas de vehículos cerrados | No visible | No | No puedes personalizar la visibilidad de las tareas de vehículos cerradas. |
Personaliza la visibilidad de las tareas de vehículos abiertas
La interfaz TaskTrackingInfo
proporciona una serie de elementos de datos de tareas que se pueden hacer visibles con el SDK para consumidores.
Elementos de datos de tareas personalizables | |
---|---|
Polilíneas de ruta Tiempo estimado de llegada Tiempo estimado de finalización de la tarea |
Distancia restante en automóvil hasta la tarea Recuento de paradas restantes Ubicación del vehículo |
Opciones de visibilidad por tarea
Puedes personalizar la configuración de visibilidad por tarea configurando TaskTrackingViewConfig
cuando crees o actualices una tarea en Fleet Engine. Usa las siguientes opciones de visibilidad para crear criterios que determinen la visibilidad de un elemento de tarea:
Opciones de visibilidad | ||
---|---|---|
Recuento de paradas restantes Duración hasta la hora estimada de llegada Distancia de conducción restante |
Siempre visible Nunca visible |
A modo de ejemplo, supongamos que una personalización de ejemplo ajusta la visibilidad de tres elementos de datos según los criterios que se muestran en la siguiente tabla. Todos los demás elementos siguen las reglas de visibilidad predeterminadas.
Elemento de datos que se debe ajustar | Visibilidad | Criterio |
---|---|---|
Polilínea de ruta | Mostrar | El vehículo está a 3 paradas de distancia. |
ETA | Mostrar | La distancia de conducción restante es inferior a 5,000 metros. |
Recuento de paradas restantes | No mostrar nunca | El vehículo está a 3 paradas de distancia. |
En el siguiente ejemplo, se muestra esta configuración:
"taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"estimatedArrivalTimeVisibility": {
"remainingDrivingDistanceMetersThreshold": 5000
},
"remainingStopCountVisibility": {
"never": true
}
}
Rutas de polilíneas y reglas de visibilidad de la ubicación de los vehículos
Los polilíneas de ruta no pueden ser visibles, a menos que la ubicación del vehículo también sea visible. De lo contrario, la ubicación del vehículo se puede inferir al final de un polilínea.
Estos lineamientos te ayudan a proporcionar una combinación válida para las opciones de visibilidad de la ruta y el polilinea de la ubicación del vehículo.
Misma visibilidad | Criterio de visibilidad | Orientación |
---|---|---|
Las opciones de polilíneas de ruta se configuraron para que siempre sean visibles. | Establece la ubicación del vehículo para que siempre sea visible. | |
La ubicación del vehículo se estableció como nunca visible. | Establece las polilíneas de la ruta para que nunca sean visibles. | |
La opción de visibilidad puede ser cualquiera de las siguientes:
|
Establece las opciones de polilínea de la ruta en un valor menor o igual que el valor establecido para la ubicación del vehículo. Por ejemplo: "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingStopCountThreshold": 5 }, } |
|
Diferentes opciones de visibilidad | Criterios de visibilidad | Orientación |
La ubicación del vehículo es visible | Esto sucede solo cuando se cumplen ambas opciones de visibilidad de la ubicación del vehículo y del polilinea. Por ejemplo: "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingDrivingDistanceMetersThreshold": 3000 }, } En este ejemplo, la ubicación del vehículo solo es visible si el recuento de paradas restante es de al menos 3 Y la distancia de conducción restante es de al menos 3,000 metros. |
Inhabilita el ajuste automático
Si inhabilitas el ajuste automático, puedes evitar que el mapa ajuste automáticamente el viewport al vehículo y la ruta prevista. En el siguiente ejemplo, se muestra cómo inhabilitar el ajuste automático cuando configuras la vista de mapa para compartir el recorrido.
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});