Konfigurowanie mapy

Wybierz platformę: Android iOS

Aby śledzić przejazd w aplikacji użytkownika, musisz najpierw zdefiniować mapę i w razie potrzeby dodać obsługę map wektorowych.

Aby skonfigurować mapę w aplikacji:

  1. Zdefiniuj fragment mapy, aby śledzić przejazd.
  2. Dodaj obsługę warstwy podstawowej map i kontrolera widoku.
  3. W razie potrzeby dodaj obsługę grafiki wektorowej na Androidzie, aby wyświetlać mapy wektorowe.

Po zdefiniowaniu mapy możesz dodać dodatkowe widoki i elementy sterujące kamerą, aby dostosować wrażenia wizualne. Więcej informacji znajdziesz w artykule Styl mapy.

Krok 1. Zdefiniuj fragment mapy, aby śledzić przejazd

Mapę definiujesz, dodając fragment lub widok mapy, aby utworzyć mapę, na której udostępniasz przejazd na żądanie w aplikacji użytkownika. Aby zdefiniować mapę, użyj jednej z tych metod:

  • ConsumerMapFragment: użyj, aby zdefiniować mapę za pomocą Fragment.

  • ConsumerMapView: użyj, aby zdefiniować mapę za pomocą View.

Funkcje są takie same w obu przypadkach, więc wybierz metodę, która lepiej pasuje do Twojej aplikacji.

Obie metody zostały szczegółowo opisane w następnej sekcji.

Dodawanie fragmentu lub widoku mapy

Aby utworzyć mapę, która będzie wyświetlać postęp przejazdu, za pomocą fragmentu lub widoku Androida, wykonaj te czynności i zapoznaj się z przykładami kodu.

  1. Zdefiniuj fragment lub widok w pliku XML układu aplikacji, który znajduje się w folderze /res/layout. Zdefiniuj mapę przejazdu jako fragment za pomocą ConsumerMapFragment lub jako widok za pomocą ConsumerMapView.

    Fragment lub widok zapewnia dostęp do mapy przejazdu, którą aplikacja może otwierać i modyfikować. Mapa udostępnia też uchwyt do ConsumerController, który umożliwia aplikacji kontrolowanie i dostosowywanie wrażeń klienta.

  2. W metodzie onCreate() wywołaj getConsumerGoogleMapAsync(callback), która asynchronicznie zwraca ConsumerGoogleMap w wywołaniu zwrotnym.

  3. Użyj ConsumerGoogleMap, aby wyświetlić postęp przejazdu i w razie potrzeby go zaktualizować.

Przykład dodawania: ConsumerMapFragment

  1. Zdefiniuj fragment w pliku XML układu aplikacji, jak pokazano w tym przykładzie kodu.

    <fragment
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
        android:id="@+id/consumer_map_fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    
  2. Wywołaj metodę getConsumerGoogleMapAsync() z metody onCreate().

Java

 public class SampleAppActivity extends AppCompatActivity {

   @Override
   protected void onCreate(Bundle savedInstanceState) {

     // Find the ConsumerMapFragment.
     ConsumerMapFragment consumerMapFragment =
         (ConsumerMapFragment) fragmentManager.findFragmentById(R.id.consumer_map_fragment);

     // Initiate the callback that returns the map.
     if (consumerMapFragment != null) {
       consumerMapFragment.getConsumerGoogleMapAsync(
           new ConsumerMapReadyCallback() {
             // The map returned in the callback is used to access the ConsumerController.
             @Override
             public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
               ConsumerController consumerController = consumerGoogleMap.getConsumerController();
             }
           });
     }
   }

 }

Kotlin

 class SampleAppActivity : AppCompatActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
     // Find the ConsumerMapFragment.
     val consumerMapFragment =
       fragmentManager.findFragmentById(R.id.consumer_map_fragment) as ConsumerMapFragment

     consumerMapFragment.getConsumerGoogleMapAsync(
       object : ConsumerMapReadyCallback() {
         override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
           val consumerController = consumerGoogleMap.getConsumerController()!!
         }
       }
     )
   }
 }

Przykład dodawania: ConsumerMapView

  1. Użyj widoku we fragmencie lub w aktywności, zgodnie z definicją w pliku XML.

     <com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapView
         xmlns:android="http://schemas.android.com/apk/res/android"
         android:id="@+id/consumer_map_view"
         android:layout_width="match_parent"
         android:layout_height="match_parent" />
    
  2. Zadzwoń do: getConsumerGoogleMapAsync() z: onCreate(). Oprócz parametru wywołania zwrotnego podaj te informacje:

    • Aktywność lub fragment zawierający. Klasa bazowa aktywności lub fragmentu musi być klasą FragmentActivity lub klasą pomocniczą Fragment (odpowiednio), ponieważ zapewniają one dostęp do cyklu życia.

    • GoogleMapOptions (który może mieć wartość null) zawierający atrybuty konfiguracji dla MapView.

Java

public class SampleAppActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    ConsumerMapView mapView = findViewById(R.id.consumer_map_view);

    if (mapView != null) {
      mapView.getConsumerGoogleMapAsync(
          new ConsumerMapReadyCallback() {
            // The map returned in the callback is used to access the ConsumerController.
            @Override
            public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
              ConsumerController consumerController = consumerGoogleMap.getConsumerController();
            }
          }, this, null);
    }
  }

}

Kotlin

class SampleAppActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

    mapView.getConsumerGoogleMapAsync(
      object : ConsumerMapReadyCallback() {
        // The map returned in the callback is used to access the ConsumerController.
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          val consumerController = consumerGoogleMap.getConsumerController()!!
        }
      },
      /* fragmentActivity= */ this,
      /* googleMapOptions= */ null,
    )
  }
}

MapView we fragmencie jest taki sam jak w poprzednim przykładzie dla MapView w aktywności, z tą różnicą, że fragment rozszerza układ zawierający MapView w metodzie onCreateView() fragmentu.

Java

public class MapViewInFragment extends Fragment {

  @Override
  public View onCreateView(
      @NonNull LayoutInflater layoutInflater,
      @Nullable ViewGroup viewGroup,
      @Nullable Bundle bundle) {
    return layoutInflater.inflate(R.layout.consumer_map_view, viewGroup, false);
  }

}

Kotlin

class MapViewInFragment : Fragment() {
  override fun onCreateView(
    layoutInflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?,
  ): View {
    return layoutInflater.inflate(R.layout.consumer_map_view, viewGroup, false)
  }
}

Krok 2. Dodaj obsługę warstwy podstawowej map i kontrolera widoku

Aby udostępniać postępy w podróży w aplikacji, dodaj do niej te klasy: ConsumerGoogleMap i ConsumerController.

  • Pobierz ConsumerGoogleMap z ConsumerMapFragment lub ConsumerMapView, które asynchronicznie zwracają ConsumerGoogleMap w ConsumerMapReadyCallback.

    ConsumerGoogleMap to klasa otoki dla klasy GoogleMap. Używa interfejsu API odpowiadającego GoogleMap, dzięki czemu aplikacja może wchodzić w interakcje z mapą. Dzięki temu aplikacja może bezproblemowo współdziałać z tą samą mapą Google. Na przykład GoogleMap umożliwia tylko jedną rejestrację wywołania zwrotnego, ale ConsumerGoogleMap obsługuje podwójne zarejestrowane wywołania zwrotne. Te wywołania zwrotne umożliwiają aplikacji rejestrowanie wywołań zwrotnych, które są wywoływane sekwencyjnie.

  • Zyskaj ConsumerController od ConsumerGoogleMap w getConsumerController().

    ConsumerController zapewnia dostęp do funkcji udostępniania przejazdów, takich jak monitorowanie przejazdów, kontrolowanie stanu przejazdu i ustawianie lokalizacji.

Przykłady dodawania ConsumerGoogleMap i ConsumerController do aplikacji w językach Java i Kotlin znajdziesz poniżej.

Java

private ConsumerGoogleMap consumerGoogleMap;
private ConsumerController consumerController;
private ConsumerMapView consumerMapView;

consumerMapView.getConsumerGoogleMapAsync(
    new ConsumerMapReadyCallback() {
      @Override
      public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerMap) {
        consumerGoogleMap = consumerMap;
        consumerController = consumerMap.getConsumerController();
      }
    },
    this, null);

Kotlin

var consumerGoogleMap: ConsumerGoogleMap
var consumerController: ConsumerController
val consumerMapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

consumerMapView.getConsumerGoogleMapAsync(
  object : ConsumerMapReadyCallback() {
    override fun onConsumerMapReady(consumerMap: ConsumerGoogleMap) {
      consumerGoogleMap = consumerMap
      consumerController = consumerMap.getConsumerController()
    },
    /* fragmentActivity= */ this,
    /* googleMapOptions= */ null,
  }
)

Krok 3. Dodaj obsługę grafiki wektorowej na Androidzie

Jeśli projekt aplikacji wymaga obsługi grafiki wektorowej, dodaj obsługę urządzeń z Androidem i obiektów rysowalnych wektorowo, wykonując te czynności:

  1. Dodaj do aktywności ten kod: Ten kod rozszerza AppCompatActivity, aby używać obiektów rysowalnych wektorowo w pakiecie SDK dla konsumentów.

Java

// ...
import android.support.v7.app.AppCompatActivity;

// ...

public class ConsumerTestActivity extends AppCompatActivity {
  // ...
}

Kotlin

// ...
import android.support.v7.app.AppCompatActivity

// ...

class ConsumerTestActivity : AppCompatActivity() {
  // ...
}

Co dalej?

Śledzenie przejazdu na Androidzie

Zmienianie stylu mapy