Określanie stylu mapy

Wybierz platformę: Android iOS JavaScript

Z tego przewodnika dowiesz się, jak dostosować styl mapy wyświetlanej w aplikacji na iOS podczas śledzenia podróży.

Zanim zaczniesz

Zanim zaczniesz dostosowywać styl mapy, musisz mieć aplikację użytkownika, w której zaimplementowano te elementy:

Musisz też skonfigurować usługi backendu, których wymaga pakiet Consumer SDK, oraz sam pakiet Consumer SDK. Więcej informacji znajdziesz w artykułach Konfigurowanie pakietu Consumer SDK i Co to jest Fleet Engine?.

Dostosowywanie mapy

Dostępne są te opcje dostosowywania:

  • Dostosowywanie stylu mapy: możesz dostosować kolory mapy, polilinie i inne elementy mapy za pomocą funkcji definiowania stylów map w Google Cloud. Zobacz Dostosowywanie stylu mapy.

  • Dostosowywanie powiększenia kamery: możesz użyć wbudowanej funkcji lub ustawić własne opcje kamery, aby skupić się na podróży. Zobacz Dostosowywanie powiększenia kamery, aby skupić się na podróży.

  • Dostosowywanie znaczników i polilinii: możesz dodać do projektu aplikacji niestandardowe znaczniki i polilinie trasy. Te elementy projektu umożliwiają aplikacji dla konsumentów wyświetlanie dynamicznego podglądu trasy pojazdu. Zobacz Dostosowywanie znaczników i Dostosowywanie polilinii.

    Pakiet SDK udostępnia te opcje za pomocą właściwości consumerMapStyleCoordinator. Ta właściwość jest dostępna w klasie GMTCMapView.

Dostosowywanie stylu mapy za pomocą funkcji definiowania stylów map w Google Cloud

Dostosuj wygląd komponentu mapy za pomocą funkcji definiowania stylów map w Google Cloud. Style map możesz tworzyć i edytować w Konsoli Google Cloud w przypadku dowolnej aplikacji korzystającej z Map Google bez konieczności wprowadzania jakichkolwiek zmian w kodzie. Więcej informacji znajdziesz w artykule Definiowanie stylów map w Google Cloud.

Zarówno klasy ConsumerMapView , jak i ConsumerMapFragment obsługują definiowanie stylów map w Google Cloud. Aby korzystać z definiowania stylów map w Google Cloud, upewnij się, że wybrany renderer map to LATEST. W sekcjach poniżej znajdziesz przykłady użycia definiowania stylów map w Google Cloud w projekcie.

ConsumerMapView

Aby używać definiowania stylów map w Google Cloud w ConsumerMapView, ustaw pole mapId w GoogleMapOptions i przekaż GoogleMapOptions do getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) lub getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions)

Przykład

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

Istnieją 2 sposoby używania definiowania stylów map w Google Cloud w ConsumerMapFragments:

  • Statycznie za pomocą kodu XML.
  • Dynamicznie za pomocą newInstance.

Statycznie za pomocą kodu XML

Aby używać definiowania stylów map w Google Cloud z kodem XML w ConsumerMapFragment, dodaj atrybut XML map:mapId z określonym mapId. Przyjrzyj się temu przykładowi:

<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"/>

Dynamicznie za pomocą newInstance

Aby używać definiowania stylów map w Google Cloud z newInstance w ConsumerMapFragment, ustaw pole mapId w GoogleMapOptions i przekaż GoogleMapOptions do newInstance. Przyjrzyj się temu przykładowi:

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
  }
}

Dostosowywanie powiększenia kamery, aby skupić się na podróży

Podczas aktywnej sesji udostępniania podróży użytkownikowi łatwiej jest zobaczyć większy widok pojazdu na trasie niż zbliżenie pojazdu na trasie. Aby to zrobić, dostosuj poziom powiększenia kamery za pomocą wbudowanej funkcji AutoCamera lub dostosuj zachowanie kamery samodzielnie w ten sposób:

  • AutoCamera: jeśli chcesz używać AutoCamera, nie musisz nic robić. Domyślnie kamera śledzi podróż.

  • Dostosowywanie zachowania kamery: aby dostosować zachowanie kamery, musisz wyłączyć AutoCamera, a następnie wprowadzić zmiany.

AutoCamera domyślnie centruje kamerę

Pakiet Consumer SDK udostępnia funkcję AutoCamera, która jest domyślnie włączona w przypadku wbudowanego przycisku Moja lokalizacja w pakiecie Maps SDK. Kamera powiększa obraz, aby skupić się na trasie podróży i następnym punkcie trasy.

Jeśli chcesz używać AutoCamera, upewnij się, że jest włączona. Więcej informacji znajdziesz w artykule allowCameraAutoUpdate.

`AutoCamera`

Więcej informacji o przycisku Moja lokalizacja w pakiecie Maps SDK znajdziesz w sekcji Przycisk Moja lokalizacja w dokumentacji pakietu Maps SDK na iOS.

Dostosowywanie zachowania kamery

Aby mieć większą kontrolę nad zachowaniem kamery, możesz wyłączyć AutoCamera i dostosować jej zachowanie.

Wyłącz lub włącz AutoCamera za pomocą właściwości AllowCameraAutoUpdate.

Więcej informacji o dostosowywaniu kamery znajdziesz w artykule Przesuwanie kamery w dokumentacji pakietu Maps SDK na iOS.

Co dalej?

Śledzenie podróży w iOS