Określanie stylu mapy

Z tego przewodnika dowiesz się, jak stylizować mapę wyświetlaną w aplikacji na iOS podczas śledzenia podróży.

Zanim zaczniesz

Aby określić styl mapy, musisz mieć aplikację Implementacja tych elementów:

• Widok mapy. Zobacz Inicjowanie widoku mapy.

• Sposób obsługi zdarzeń wyświetlenia mapy. Zobacz Obsługa zdarzeń wyświetlenia mapy

Musisz też skonfigurować usługi backendu, których wymaga pakiet Consumer SDK, i skonfigurować pakiet SDK Consumer SDK. Szczegółowe informacje znajdziesz w artykule Konfigurowanie pakietu SDK dla klientów indywidualnych. i Co to jest Fleet Engine?.

Dostosowywanie mapy

Dostępne są następujące modyfikacje:

• Określanie stylu mapy: możesz określić styl kolorów mapy, linii łamanych i innych elementów mapy. za pomocą stylu map w chmurze. Zobacz Określanie 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 Dostosuj powiększenie aparatu, aby skupić się na podróży.

• Dostosowywanie znaczników i linii łamanych: możesz dodawać niestandardowe znaczniki i trasy. linii łamanych. Te elementy interfejsu pozwalają konsumentom aby wyświetlić dynamiczny podgląd trasy pojazdu. Zobacz Dostosuj znaczniki oraz Dostosuj linie łamane.

  Pakiet SDK udostępnia te opcje w consumerMapStyleCoordinator usłudze. Ta właściwość jest dostępna w klasie GMTCMapView.

Nadaj mapie styl określania stylów map w chmurze

Dostosuj wygląd i styl komponentu map za pomocą map działających w chmurze stylu. W konsoli Google Cloud możesz tworzyć i edytować style mapy dla dowolnych w aplikacjach korzystających z Map Google bez konieczności wprowadzania zmian w kodzie. Więcej informacji: Definiowanie stylów map w Google Cloud

Zarówno ConsumerMapView oraz ConsumerMapFragment klas obsługują określanie stylów map w chmurze. Aby używać stylu map w chmurze, sprawdź, czy wybrane mapy mechanizm renderowania to LATEST. W poniższych sekcjach znajdziesz przykłady użycia funkcji stosować w projekcie stylowanie map w chmurze.

ConsumerMapView

Aby w ConsumerMapView używać stylu map w chmurze, ustaw atrybut mapId w GoogleMapOptions i przekazać GoogleMapOptions do getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) lub getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions)

Przykład

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

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 nadawania stylów map w chmurze Fragmenty ConsumerMapFragments:

• Statycznie z użyciem pliku XML.
• Dynamicznie z użyciem funkcji newInstance.

Statycznie za pomocą pliku XML

Aby użyć opartego na chmurze stylu map z użyciem kodu XML w pliku 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 z użyciem newInstance

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

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

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

Dostosuj powiększenie aparatu, aby skupić się na podróży

Podczas aktywnej sesji udostępniania podróży użytkownikowi przydaje się widok pojazdu w większym rozmiarze, a nie zbliżenie pojazdu na trasie. W tym celu dostosuj powiększenie kamery za pomocą wbudowanego interfejsu AutoCamera lub dostosować działanie kamery. w następujący sposób:

• AutoCamera: jeśli chcesz korzystać z funkcji AutoCamera, nie musisz nic robić. Domyślnie kamera podąża za podróżą.

• Dostosuj działanie kamery: aby dostosować działanie kamery, musisz wyłączyć AutoCamera, a następnie wprowadzić zmiany.

AutoCamera domyślnie wyśrodkowuje kamerę

Pakiet SDK dla klientów indywidualnych udostępnia domyślnie włączoną funkcję AutoCamera po kliknięciu wbudowanego przycisku Moja lokalizacja pakietu SDK Map Google. Aparat przybliża obraz na i skup się na udostępnianiu trasy i kolejnym punkcie trasy.

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

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

Dostosowywanie działania kamery

Aby mieć większą kontrolę nad działaniem kamery, możesz wyłączyć AutoCamera oraz dostosować działanie kamery.

Wyłącz lub włącz AutoCamera za pomocą AllowCameraAutoUpdate. usłudze.

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

Co dalej?

Śledzenie podróży na urządzeniu z iOS