Dodawanie mapy

Wybierz platformę: Android iOS JavaScript

W tym temacie opisujemy, jak dodać podstawową mapę do aplikacji na Androida po skonfigurowaniu projektu do korzystania z pakietu Maps SDK na Androida. Po dodaniu mapy możesz zmienić jej typ i funkcje.

Omówienie

Pakiet SDK Map na Androida udostępnia kilka klas, których aplikacja może używać do zarządzania cyklem życia, funkcjami i danymi mapy. Te klasy obsługują interakcje z użytkownikiem na podstawie modelu interfejsu użytkownika Androida, np. ustawiania początkowego stanu mapy i reagowania na gesty użytkownika w czasie wykonywania.

Główny interfejs i klasy do obsługi map:

  • GoogleMap – punkt wejścia do zarządzania elementami i danymi mapy. Aplikacja może uzyskać dostęp do obiektu GoogleMap dopiero po jego pobraniu z obiektu SupportMapFragment lub MapView.

  • SupportMapFragment – fragment do zarządzania cyklem życia obiektu GoogleMap.

  • MapView – widok do zarządzania cyklem życia obiektu GoogleMap.

  • OnMapReadyCallback – interfejs wywołania obsługi zdarzeń i interakcji użytkownika z obiektem GoogleMap.

Obiekt GoogleMap automatycznie wykonuje te operacje:

  • Łączenie z usługą Mapy Google.
  • Pobieranie elementów mapy.
  • wyświetlanie kafelków na ekranie urządzenia;
  • wyświetlanie różnych elementów sterujących, takich jak przesuwanie i powiększanie;
  • reagowanie na gesty przesuwania i powiększania przez przesuwanie mapy i powiększanie lub pomniejszanie widoku;

Aby użyć obiektu GoogleMap w aplikacji, musisz użyć obiektu SupportMapFragment lub MapView jako obiektu kontenera dla mapy, a następnie pobrać obiekt GoogleMap z kontenera. Klasy kontenera pochodzą z fragmentu lub widoku Androida, dzięki czemu zapewniają mapie zarządzanie cyklem życia i możliwości interfejsu użytkownika z podstawowych klas Androida. Klasa SupportMapFragment jest nowocześniejszym i bardziej powszechnym kontenerem dla obiektu GoogleMap.

Wyświetlanie kodu

Poniższy kod pochodzi z pełnej aktywności w języku Java użytej w tym temacie do statycznego dodawania fragmentu. Projekt na Androida został utworzony na podstawie szablonu pustego projektu, a potem zaktualizowany zgodnie z instrukcjami w przewodniku po konfiguracji projektu. Po wykonaniu czynności opisanych w tym temacie kod może się różnić w zależności od szablonu projektu.

  package com.example.mapsetup;

  import androidx.appcompat.app.AppCompatActivity;

  import android.os.Bundle;

  import com.google.android.gms.maps.GoogleMap;
  import com.google.android.gms.maps.OnMapReadyCallback;
  import com.google.android.gms.maps.SupportMapFragment;
  import com.google.android.gms.maps.model.LatLng;
  import com.google.android.gms.maps.model.MarkerOptions;

  // Implement OnMapReadyCallback.
  public class MainActivity extends AppCompatActivity implements OnMapReadyCallback {

      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          // Set the layout file as the content view.
          setContentView(R.layout.activity_main);

          // Get a handle to the fragment and register the callback.
          SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
                  .findFragmentById(R.id.map);
          mapFragment.getMapAsync(this);

      }

      // Get a handle to the GoogleMap object and display marker.
      @Override
      public void onMapReady(GoogleMap googleMap) {
          googleMap.addMarker(new MarkerOptions()
                  .position(new LatLng(0, 0))
                  .title("Marker"));
      }
  }

Dodawanie mapy

W tej sekcji opisaliśmy, jak dodać podstawową mapę, używając fragmentu jako kontenera mapy. Możesz jednak użyć widoku. Przykład znajdziesz w pliku RawMapViewDemoActivity na GitHubie.

Podstawowe kroki:

  1. Aby pobrać pakiet SDK, uzyskać klucz interfejsu API i dodać wymagane platformy, wykonaj te czynności:

    1. Konfigurowanie w konsoli Google Cloud

    2. Korzystanie z klucza interfejsu API

    3. Konfigurowanie projektu w Android Studio

  2. Dodaj obiekt SupportMapFragment do aktywności, która będzie obsługiwać mapę. Możesz dodać fragment statycznie lub dynamicznie.

  3. Zaimplementuj interfejs OnMapReadyCallback.

  4. Ustaw plik układu jako widok treści.

  5. Jeśli fragment został dodany statycznie, uzyskaj odwołanie do tego fragmentu.

  6. Zarejestruj wywołanie zwrotne.

  7. Uzyskaj obiekt GoogleMap.

Dodawanie obiektu SupportMapFragment

Obiekt SupportMapFragment możesz dodać do aplikacji w sposób statyczny lub dynamiczny. Najprostszym sposobem jest dodanie go statycznie. Jeśli fragment zostanie dodany dynamicznie, możesz wykonywać na nim dodatkowe działania, np. usuwać go i zastępować w czasie działania.

Dodawanie fragmentu statycznego

W pliku układu aktywności, która będzie obsługiwać mapę:

  1. Dodaj element fragment.
  2. Dodaj deklarację nazwy xmlns:map="http://schemas.android.com/apk/res-auto". Umożliwia to korzystanie z maps atrybutów XML niestandardowych.
  3. W elemencie fragment ustaw atrybut android:name na com.google.android.gms.maps.SupportMapFragment.
  4. W elemencie fragment dodaj atrybut android:id i przypisz mu identyfikator zasobu R.id.map (@+id/map).

Oto przykładowy kompletny plik układu zawierający element fragment:

<?xml version="1.0" encoding="utf-8"?>
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:id="@+id/map"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Aby dynamicznie dodać fragment

W aktywności:

  1. Utwórz instancję SupportMapFragment.
  2. Zrealizuj transakcję, która dodaje fragment do aktywności. Więcej informacji znajdziesz w artykule Ułamywanie transakcji.

Na przykład:

Kotlin

val mapFragment = SupportMapFragment.newInstance()
supportFragmentManager
    .beginTransaction()
    .add(R.id.my_container, mapFragment)
    .commit()

Java

SupportMapFragment mapFragment = SupportMapFragment.newInstance();
getSupportFragmentManager()
    .beginTransaction()
    .add(R.id.my_container, mapFragment)
    .commit();

Zaimplementuj interfejs OnMapReadyCallback

Zaktualizuj deklarację aktywności w ten sposób:

Kotlin

class MainActivity : AppCompatActivity(), OnMapReadyCallback {

    // ...
}

Java

class MainActivity extends AppCompatActivity implements OnMapReadyCallback {
    // ...
}

Ustawianie widoku treści

W metodzie onCreate aktywności wywołaj metodę setContentView i ustaw plik układu jako widok treści.

Jeśli na przykład plik układu ma nazwę main.xml:

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.main)
}

Java

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
}

Uzyskaj odwołanie do fragmentu i zarejestruj wywołanie zwrotne

  1. Aby uzyskać uchwyt do fragmentu, wywołaj metodę FragmentManager.findFragmentById i podaj jej identyfikator zasobu fragmentu w pliku układu. Jeśli fragment został dodany dynamicznie, pomiń ten krok, ponieważ uchwyt został już pobrany.

  2. Wywołaj metodę getMapAsync, aby ustawić funkcję wywołania zwrotnego w fragmentach.

Jeśli na przykład fragment został dodany statycznie:

Kotlin

val mapFragment = supportFragmentManager
    .findFragmentById(R.id.map) as SupportMapFragment
mapFragment.getMapAsync(this)

Java

SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
    .findFragmentById(R.id.map);
mapFragment.getMapAsync(this);

Pobieranie obiektu GoogleMap

Aby uzyskać uchwyt do obiektu GoogleMap, użyj metody wywołania zwrotnego onMapReady. wywołanie zwrotne jest wywoływane, gdy mapa jest gotowa do odbierania danych wejściowych użytkownika. Udostępnia instancję klasy GoogleMap o wartości niezerowej, której możesz użyć do zaktualizowania mapy.

W tym przykładzie funkcja wywołania zwrotnego onMapReady pobiera uchwyt do obiektu GoogleMap, a następnie dodaje do mapy znacznik:

Kotlin

override fun onMapReady(googleMap: GoogleMap) {
    googleMap.addMarker(
        MarkerOptions()
            .position(LatLng(0.0, 0.0))
            .title("Marker")
    )
}

Java

@Override
public void onMapReady(GoogleMap googleMap) {
    googleMap.addMarker(new MarkerOptions()
        .position(new LatLng(0, 0))
        .title("Marker"));
}

Zrzut ekranu z mapą i znacznik wyśrodkowany na wyspie Null.

Po skompilowaniu i uruchomieniu aplikacji wyświetli się mapa z znacznikiem na wyspie Null (0° szerokości geograficznej i 0° długości geograficznej).

Wyświetl kod całego ćwiczenia:

Wyświetl Zakończony moduł

Co dalej?

Po wykonaniu tych czynności możesz skonfigurować ustawienia mapy.