Aplica diseño a un mapa

Selecciona la plataforma: Android iOS JavaScript

En esta guía, se describen las maneras de aplicar ajustes de diseño al mapa que se muestra en tu app para iOS cuando sigues un viaje.

Antes de comenzar

Antes de aplicar diseño a un mapa, debes tener una app para consumidores con se implementaron lo siguiente:

También debes configurar los servicios de backend que necesita el SDK del consumidor y configurar el SDK para consumidores. Para obtener más detalles, consulta Cómo configurar el SDK de consumidor. y What is Fleet Engine?.

Personalizaciones de mapas

Estas son las personalizaciones disponibles:

  • Aplica diseño al mapa: Puedes aplicar ajustes de diseño a colores, polilíneas y otros componentes del mapa. con el diseño de mapas basado en Cloud. Consulta Aplicar ajustes de diseño al mapa.

  • Ajusta el zoom de la cámara: Puedes usar la función integrada o establecer tus propias opciones de cámara para enfocarte en un viaje. Consulta Ajusta el zoom de la cámara para enfocar un viaje.

  • Personalizar marcadores y polilíneas: Puedes agregar marcadores y rutas personalizados. polilíneas al diseño de tu aplicación. Estos elementos de diseño permiten que tu consumidor para mostrar una vista previa dinámica de la ruta del vehículo. Consulta Cómo personalizar marcadores Personaliza las polilíneas.

    El SDK proporciona estas opciones a través de consumerMapStyleCoordinator. propiedad. Esta propiedad está disponible a través de la clase GMTCMapView.

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

Personaliza el aspecto 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 aplicar cambios en el código. Para obtener más información, consulta Diseño de mapas basado en la nube.

Ambos 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) 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

Hay dos formas de utilizar el diseño de mapas basado en Cloud 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 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
  }
}

Ajusta el zoom de la cámara para enfocar un viaje

Durante una sesión activa en la que se comparte recorrido, es útil que el usuario vea una vista más grande del vehículo a lo largo del recorrido en lugar de un acercamiento del vehículo en una ruta. Para ello, debes ajustar el zoom de la cámara de nivel con el AutoCamera integrado o a través de la personalización del comportamiento de la cámara tú mismo de la siguiente manera:

  • AutoCamera: Si quieres usar AutoCamera, no tienes de hacer nada. La cámara sigue el viaje de forma predeterminada.

  • Personalizar el comportamiento de la cámara: Para personalizar el comportamiento de la cámara, haz lo siguiente: Debes inhabilitar AutoCamera y, luego, realizar las personalizaciones.

AutoCamera centra la cámara de forma predeterminada.

El SDK para consumidores proporciona una función AutoCamera que está habilitada de forma predeterminada en el botón Mi ubicación integrado en el SDK de Maps. La cámara acerca la imagen para enfocarse en la ruta de uso compartido del viaje y el próximo punto de referencia del viaje.

Si deseas usar AutoCamera, asegúrate de que esté habilitado. Consulta allowCameraAutoUpdate para obtener más información.

&quot;Cámara automática&quot;

Para obtener detalles sobre el botón Mi ubicación para el SDK de Maps, consulta Botón Mi ubicación en la documentación del SDK de Maps para iOS.

Cómo personalizar el comportamiento de la cámara

Para tener más control del comportamiento de la cámara, puedes inhabilitar AutoCamera y personalizar el comportamiento de la cámara.

Habilita o inhabilita AutoCamera con las AllowCameraAutoUpdate propiedad.

Para obtener más personalizaciones de la cámara, consulta Cómo mover la cámara en la documentación del SDK de Maps para iOS.

¿Qué sigue?

Cómo seguir un viaje en iOS