Okna informacyjne

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Wybierz platformę: Android iOS JavaScript

Okno informacyjne wyświetla tekst lub obrazy w wyskakującym okienku nad mapą. Okna informacyjne są zawsze zakotwiczone do znacznika. Domyślne działanie to wyświetlanie po kliknięciu znacznika.

Przykładowe fragmenty kodu

Repozytorium ApiDemos w GitHubie zawiera próbkę prezentującą wszystkie funkcje okna informacyjnego:

Wprowadzenie

Okno informacyjne umożliwia wyświetlanie informacji użytkownikowi, który dotknie znacznika. Wyświetlane jest tylko jedno okno informacyjne naraz. Gdy użytkownik kliknie znacznik, obecne okno informacyjne zostanie zamknięte i wyświetlone będzie nowe okno. Jeśli użytkownik kliknie znacznik, który obecnie wyświetla okno informacyjne, okno informacyjne zostanie zamknięte i ponownie otwarte.

Okno informacyjne jest rysowane na ekranie urządzenia i wyśrodkowane nad powiązanym znacznikiem. Domyślne okno informacyjne zawiera tytuł pogrubiony, a (opcjonalnie) fragment kodu poniżej tytułu.

Dodaj okno informacyjne

Najprostszym sposobem dodania okna informacyjnego jest ustawienie metod title() i snippet() odpowiedniego znacznika. Ustawienie tych właściwości spowoduje, że po kliknięciu tego znacznika pojawi się okno informacyjne.

Java


final LatLng melbourneLatLng = new LatLng(-37.81319, 144.96298);
Marker melbourne = map.addMarker(
    new MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne")
        .snippet("Population: 4,137,400"));

Kotlin


val melbourneLatLng = LatLng(-37.81319, 144.96298)
val melbourne = map.addMarker(
    MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne")
        .snippet("Population: 4,137,400")
)

Pokaż/ukryj okno informacyjne

Okna informacyjne są zaprojektowane tak, by reagować na zdarzenia dotyku użytkownika. Jeśli wolisz, możesz automatycznie wyświetlać okno informacyjne, wywołując showInfoWindow() na znaczniku docelowym. Okno informacyjne można ukryć, wywołując opcję hideInfoWindow().

Java


final LatLng melbourneLatLng = new LatLng(-37.81319, 144.96298);
Marker melbourne = map.addMarker(
    new MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne"));
melbourne.showInfoWindow();

Kotlin


val melbourneLatLng = LatLng(-37.81319, 144.96298)
val melbourne = map.addMarker(
    MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne")
)
melbourne?.showInfoWindow()

Możesz też tworzyć okna informacyjne dla poszczególnych klastrów połączonych. Przeczytaj przewodnik dotyczący dodawania okna informacyjnego dla poszczególnych znaczników grupowanych.

Niestandardowe okna informacyjne

Możesz też dostosować zawartość i wygląd okien informacyjnych. Aby to zrobić, musisz utworzyć konkretną implementację interfejsu InfoWindowAdapter, a potem wywołać GoogleMap.setInfoWindowAdapter() ze swoją implementacją. Interfejs zawiera 2 metody implementacji: getInfoWindow(Marker) i getInfoContents(Marker). Interfejs API najpierw wywołuje metodę getInfoWindow(Marker), a jeśli interfejs null jest zwracany, wywołuje metodę getInfoContents(Marker). Jeśli zwróci też wartość null, zostanie użyte domyślne okno informacyjne.

Pierwszy z nich (getInfoWindow()) umożliwia widok, który będzie używany w całym oknie informacyjnym. Druga opcja (getInfoContents()) umożliwia tylko dostosowanie zawartości okna przy zachowaniu domyślnej ramki i tła okna informacyjnego.

Na poniższych obrazach widać domyślne okno informacyjne, okno informacyjne z dostosowaną treścią oraz okno informacyjne z dostosowaną ramką i tłem.

Porównanie okna informacyjnego

Zdarzenia w oknie informacyjnym

Przykład żądania MarkerDemoActivity zawiera przykładowy kod służący do rejestrowania zdarzeń w oknie informacyjnym i obsługi ich.

OnInfoWindowClickListener umożliwia nasłuchiwanie zdarzeń kliknięcia w oknie informacyjnym. Aby ustawić ten odbiornik na mapie, wywołaj GoogleMap.setOnInfoWindowClickListener(OnInfoWindowClickListener). Gdy użytkownik kliknie okno informacyjne, zostanie wywołana etykieta onInfoWindowClick(Marker), a okno informacyjne zostanie wyróżnione domyślnym kolorem (szarym).

Java


class InfoWindowActivity extends AppCompatActivity implements
    GoogleMap.OnInfoWindowClickListener,
    OnMapReadyCallback {

    @Override
    public void onMapReady(GoogleMap googleMap) {
        // Add markers to the map and do other map setup.
        // ...
        // Set a listener for info window events.
        googleMap.setOnInfoWindowClickListener(this);
    }

    @Override
    public void onInfoWindowClick(Marker marker) {
        Toast.makeText(this, "Info window clicked",
            Toast.LENGTH_SHORT).show();
    }
}

Kotlin


internal inner class InfoWindowActivity : AppCompatActivity(),
    OnInfoWindowClickListener,
    OnMapReadyCallback {
    override fun onMapReady(googleMap: GoogleMap) {
        // Add markers to the map and do other map setup.
        // ...
        // Set a listener for info window events.
        googleMap.setOnInfoWindowClickListener(this)
    }

    override fun onInfoWindowClick(marker: Marker) {
        Toast.makeText(
            this, "Info window clicked",
            Toast.LENGTH_SHORT
        ).show()
    }
}

Podobnie możesz nasłuchiwać zdarzeń długiego kliknięcia za pomocą elementu OnInfoWindowLongClickListener, który możesz ustawić, wywołując metodę GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener). Ten detektor zachowuje się podobnie do detektora kliknięć i będzie powiadamiany o długich zdarzeniach kliknięcia z wywołaniem zwrotnym onInfoWindowClose(Marker).

Aby otrzymać powiadomienie o zamknięciu okna informacyjnego, użyj przycisku OnInfoWindowCloseListener, który możesz skonfigurować, wywołując opcję GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener). Otrzymasz wywołanie zwrotne onInfoWindowClose(Marker).

Uwaga na temat odświeżania okna informacyjnego: zdarzenie onInfoWindowClose() jest uruchamiane, gdy użytkownik odświeży okno informacyjne, klikając znacznik, który ma już otwarte okno. Jeśli jednak wywołasz program Marker.showInfoWindow() w otwartym oknie informacyjnym, zdarzenie onInfoWindowClose() się nie uruchomi. To drugie działanie jest oparte na założeniu, że okno informacyjne jest zamykane i ponownie otwierane.

Jak wspomnieliśmy w poprzedniej sekcji, w oknach informacyjnych okno informacyjne nie jest podglądem na żywo. Zamiast tego widok jest renderowany jako obraz na mapie. W związku z tym wszelkie detektory ustawione w widoku danych są ignorowane i nie można odróżnić zdarzeń kliknięcia w różnych częściach widoku. Odradzamy umieszczanie komponentów niestandardowych, takich jak przyciski, pola wyboru czy pola tekstowe, w niestandardowym oknie informacyjnym.