Określanie stylu mapy

Wybierz platformę: Android iOS JavaScript

W tym przewodniku opisano sposoby dostosowywania mapy wyświetlanej w aplikacji na Androida podczas podróży. Wygląd i styl mapy możesz dostosować na te sposoby:

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 znajdziesz w artykule 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 następnych sekcjach znajdziesz przykłady korzystania z definiowania stylów map w Google Cloud w ramach projektu.

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

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

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

Statycznie w 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ć stylu map w chmurze za pomocą usługi newInstance ConsumerMapFragment, ustaw pole mapId w domenie 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
  }
}

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

Podczas aktywnej sesji udostępniania podróży możesz sterować powiększeniem kamery możesz zaznaczyć jeden z dwóch sposobów:

  • AutoCamera: jeśli chcesz korzystać z funkcji AutoCamera, nie musisz nic robić. Kamera podąża za podróżą. Więcej informacji znajdziesz w sekcji AutoCamera.

  • Dostosuj działanie kamery: aby dostosować działanie kamery, musisz wyłączyć AutoCamera, a następnie wprowadzić zmiany. Więcej informacji: Więcej informacji znajdziesz w sekcji Dostosowywanie działania aparatu.

AutoCamera 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, aby skupić się na trasie udostępniania podróży i następnym punkcie kontrolnym podróży.

Jeśli chcesz używać usługi AutoCamera, włącz ją. Więcej informacji: isAutoCameraEnabled

„AutoAparat”

Informacje o przycisku Moja lokalizacja znajdziesz w Przycisk Moja lokalizacja w dokumentacji interfejsu Maps JavaScript API.

Dostosuj działanie kamery

Aby mieć większą kontrolę nad działaniem kamery, wykonaj te czynności, aby ją wyłączyć AutoCamera i ręcznie dostosuj działanie kamery.

  1. Wyłącz AutoCamera, używając metody ConsumerController.setAutoCameraEnabled().

  2. Pobierz zalecane granice kamery za pomocą funkcji ConsumerController.getCameraUpdate().

  3. Podaj CameraUpdate jako argument dla jednej z tych funkcji Androida:

Co dalej?

Śledzenie podróży na Androidzie