Aplica diseño a un mapa

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 Cloud
  • Configura las opciones de diseño del mapa directamente en tu propio código

Aplica diseño al 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 la nube. 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 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 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 archivo en formato 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 usar el diseño de mapas basado en la nube 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
  }
}

Para aplicar un diseño de mapa a tu mapa de uso compartido de recorrido del consumidor 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 determinados objetos de tareas en el mapa usando 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 el vehículo se encuentre 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 la tarea consulta Tipos de tareas en la guía Tareas programadas.

Tipo de tarea Visibilidad predeterminada ¿Es personalizable? Descripción
Tareas de falta de 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 entrega de la tarea de entrega aún se muestran.
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 Personaliza la visibilidad de los espacios tareas vehiculares.
Tareas de vehículos cerrados No visible No No puedes personalizar la visibilidad de las tareas de vehículos cerrados.

Personaliza la visibilidad de las tareas de vehículos abiertas

La interfaz TaskTrackingInfo proporciona varios elementos de datos de tareas. que se pueden mostrar con el SDK para consumidores.

Elementos personalizables de datos de tareas

Polilíneas de ruta

Tiempo estimado hasta la llegada

Tiempo estimado de finalización de la tarea

Distancia en automóvil restante para llegar a 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 estableciendo el TaskTrackingViewConfig cuando creas o actualizas una tarea en Fleet Engine. Usa las siguientes opciones de visibilidad para crear criterios determinar 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

No visible nunca

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 ajustará Visibilidad Criterio
Polilínea de ruta Mostrar El vehículo está dentro de 3 paradas.
ETA Mostrar La distancia de conducción restante es menor que 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
  }
}

Reglas de visibilidad de polilíneas de ruta y ubicación del vehículo

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 ruta en nunca visibles.
La opción de visibilidad puede ser cualquiera de las siguientes:
  • recuento de paradas restantes
  • de duración hasta la hora de llegada estimada
  • distancia de conducción restante

Establece las opciones de polilínea de rutas en un valor inferior o igual al valor establecido de 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 los recuento de paradas es de, al menos, 3 Y la cantidad restante de viajes la distancia es de al menos 3,000 metros.

Inhabilitar el ajuste automático

Puedes impedir que el mapa ajuste automáticamente el viewport al vehículo. y la ruta prevista si inhabilitas el ajuste automático. En el siguiente ejemplo, se muestra cómo inhabilitar la adaptación automática cuando configuras la vista de mapa de uso compartido de viajes.

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,
  ...
});

¿Qué sigue?