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 na znaczniku. Domyślne działanie to wyświetlanie po naciśnięciu znacznika.

Przykładowe fragmenty kodu

W repozytorium ApiDemos na GitHubie znajduje się przykład, który prezentuje wszystkie funkcje okna informacyjnego:

Wstęp

Okno informacyjne umożliwia wyświetlanie informacji użytkownikowi po kliknięciu znacznika. Wyświetlane jest tylko jedno okno informacyjne naraz. Gdy użytkownik kliknie znacznik, zamknie się obecne okno informacyjne i wyświetli się nowe okno. Jeśli użytkownik kliknie znacznik, który aktualnie wyświetla okno informacyjne, okno informacyjne zostanie zamknięte i otwarte ponownie.

Okno informacyjne jest teraz kierowane w kierunku ekranu ekranu urządzenia i wyśrodkowane nad powiązanym znacznikiem. Domyślne okno informacyjne zawiera tytuł pogrubiony, a opcjonalnie fragment kodu pod tytułem.

Dodaj okno informacyjne

Najprostszym sposobem dodania okna informacyjnego jest ustawienie metod title() i snippet() odpowiedniego znacznika. Jeśli ustawisz te właściwości, po kliknięciu tego znacznika będzie się pojawiać 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, aby reagować na zdarzenia dotyku przez użytkownika. Jeśli wolisz, możesz automatycznie wyświetlić okno informacyjne, wywołując showInfoWindow() na znaczniku docelowym. Okno informacyjne można ukryć, wywołując numer 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 znaczników zgrupowanych. Przeczytaj przewodnik dotyczący dodawania okna informacyjnego dla poszczególnych znaczników klastrów.

Niestandardowe okna informacyjne

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

Pierwszy z nich (getInfoWindow()) umożliwia utworzenie widoku, który będzie używany w całym oknie informacyjnym. Drugi z nich (getInfoContents()) pozwala dostosować zawartość okna, ale zachować domyślną ramkę i tło okna informacyjnego.

Obrazy poniżej pokazują domyślne okno informacyjne z dostosowaną treścią i okno z dostosowaną ramką i tłem.

Porównanie okien informacyjnych

Zdarzenia w oknie informacyjnym

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

Za pomocą OnInfoWindowClickListener możesz śledzić zdarzenia kliknięcia w oknie informacyjnym. Aby ustawić ten detektor na mapie, wywołaj GoogleMap.setOnInfoWindowClickListener(OnInfoWindowClickListener). Gdy użytkownik kliknie okno informacyjne, zostanie wywołana funkcja onInfoWindowClick(Marker), a okno informacyjne zostanie wyróżnione domyślnym kolorem podświetlenia (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 wychwytywać zdarzenia długiego kliknięcia za pomocą znacznika OnInfoWindowLongClickListener, który możesz ustawić jako wywołanie GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener). Ten detektor będzie działać podobnie jak detektor kliknięć i będzie otrzymywać powiadomienia o zdarzeniach polegających na długich kliknięciach z wywołaniem zwrotnym onInfoWindowClose(Marker).

Aby otrzymywać powiadomienia o zamknięciu okna informacyjnego, użyj OnInfoWindowCloseListener, który możesz ustawić, wywołując właściwość GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener). Otrzymasz wywołanie zwrotne onInfoWindowClose(Marker).

Uwaga na temat odświeżania okna informacyjnego: zdarzenie onInfoWindowClose() uruchamia się, gdy użytkownik odświeży okno informacyjne, klikając znacznik, który ma już otwarte okno informacyjne. 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 wiesz, że okno informacyjne zostanie zamknięte i otwarte ponownie.

Jak wspomniano w poprzedniej sekcji na temat okien informacyjnych, okno to nie jest aktywny widok. Zamiast tego widok jest renderowany jako obraz na mapie. W rezultacie wszystkie detektory ustawione w tym widoku są ignorowane i nie można rozróżnić zdarzeń kliknięcia w różnych częściach widoku. Odradzamy umieszczanie interaktywnych elementów (np. przycisków, pól wyboru czy elementów tekstowych) w niestandardowych oknach informacyjnych.