Aplica diseño a un mapa

En este documento, se explica cómo personalizar el aspecto de un mapa y de los controles la visibilidad de datos y las opciones de viewport. Puedes hacerlo de las siguientes maneras:

• Cómo utilizar el diseño de mapas basado en Cloud
• Cómo configurar opciones de diseño de mapa directamente en tu propio código

Personaliza el mapa con el diseño de mapas basado en Cloud

Personalizar la apariencia del componente de mapas con mapas basados en la nube estilo. Puedes crear y editar diseños de mapa en la consola de Google Cloud de cualquier de las aplicaciones que usan Google Maps, sin necesidad de realizar cambios en el 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 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
  }
}

Para aplicar un diseño de mapa a tu mapa de JavaScript para compartir el recorrido del consumidor, especifica un mapId y Cualquier otro mapOptions cuando creas el JourneySharingMapView.

Nota: No puedes cambiar ni agregar un mapId después del JourneySharingMapView. se creó una instancia.

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

Diseña mapas directamente en tu propio código

También puedes personalizar el diseño del mapa estableciendo opciones del mapa cuando creas el JourneySharingMapView En los siguientes ejemplos, se muestra cómo aplicar el diseño opciones de mapas. Para obtener más información sobre las opciones de mapa que puedes configurar, consulta mapOptions en la referencia de la Google Maps JavaScript API.

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 en el SDK

Puedes controlar la visibilidad de determinados objetos de tareas en el mapa usando las reglas de visibilidad.

Nota: Los marcadores de ubicación siempre están visibles en el mapa. Para ejemplo, siempre se muestra la ubicación de entrega del envío en el mapa, independientemente del estado de la entrega. Sin embargo, puedes personalizar el aspecto marcadores. Consulta Cómo personalizar marcadores.

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 la tarea se completados o cancelados.

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 recesos de conductores y recarga de combustible. Si se muestra una ruta a una tarea de entrega también contiene otra parada del vehículo, esa parada no se muestra si solo contiene tareas que no están disponibles. Hora de llegada estimada y el tiempo estimado de finalización de la tarea de la entrega tarea en sí.
Abrir las 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 del vehículo cerrado	No visible	No	No puedes personalizar la visibilidad de las tareas de vehículos cerrados.

Personaliza la visibilidad de las tareas abiertas del vehículo

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 de llegada estimada Distancia de conducción restante	Siempre visible No visible nunca

Nota: Cualquier elemento de datos determinado se puede asociar con una sola opción de visibilidad. No es posible combinar criterios con O ni Y.

A modo de ejemplo, supongamos que un ejemplo de personalización ajusta la visibilidad para tres los elementos de datos con los criterios que se muestran en la siguiente tabla. Todos los demás siguen las reglas de visibilidad predeterminadas.

Elemento de datos para ajustar	Visibilidad	Criterio
Polilínea de ruta	Mostrar	El vehículo está en un radio 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á en un radio de 3 paradas.

En el siguiente ejemplo, se muestra esta configuración:

"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

Nota: También puedes personalizar las opciones de visibilidad predeterminadas de tu proyecto de la siguiente manera: comunicándose con el equipo de asistencia al cliente.

Rutas de polilíneas y reglas de visibilidad de la ubicación de los vehículos

Las polilíneas de la ruta no pueden ser visibles, a menos que la ubicación del vehículo también esté visible; De lo contrario, la ubicación del vehículo se puede inferir cuando finaliza un polilínea.

Punto clave: Se deben aplicar las reglas de visibilidad de polilíneas igualmente restrictivo o más restrictivo que las reglas de visibilidad para la ubicación del vehículo.

Estos lineamientos te ayudan a proporcionar una combinación válida de rutas y las opciones de visibilidad de ubicación de vehículos y polilíneas.

Mismas opciones de visibilidad	Criterio de visibilidad	Orientación
	Las opciones de rutas de polilíneas configuradas como siempre visibles	Establecer la ubicación del vehículo como siempre visible
	Se estableció la ubicación del vehículo como nunca visible.	Establece las polilíneas de ruta en nunca visibles.
	La opción de visibilidad es cualquiera de las siguientes opciones: recuento de paradas restantes de duración hasta la hora de llegada estimada distancia restante en automóvil	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 tanto la ubicación del vehículo como Se cumplen las opciones de visibilidad de polilíneas. 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. El siguiente ejemplo se muestra cómo inhabilitar el ajuste automático cuando configuras el recorrido compartido vista de mapa.

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?

• Cómo personalizar marcadores
• Cómo personalizar las polilíneas