Okna informacyjne

Wybierz platformę: Android iOS JavaScript

Nad mapą w oknie informacyjnym wyświetlany jest tekst lub obrazy w wyskakującym okienku. Okna informacyjne są zawsze zakotwiczone względem znacznika. Domyślnie wyświetlane są po kliknięciu znacznika.

Przykładowe fragmenty kodu

Repozytorium AIDemos na GitHubie zawiera przykład pokazujący wszystkie funkcje okna informacyjnego:

Wstęp

Okno informacyjne umożliwia wyświetlanie informacji użytkownikowi po kliknięciu znacznika. W danym momencie wyświetlane jest tylko jedno okno informacyjne. Gdy użytkownik kliknie znacznik, bieżące okno informacyjne zostanie zamknięte i pojawi się nowe okno informacyjne. Pamiętaj, że jeśli użytkownik kliknie znacznik, który aktualnie wskazuje okno informacyjne, okno informacyjne zostanie zamknięte i otwarte ponownie.

Okno informacyjne jest wyświetlane zorientowane na ekran urządzenia i znajduje się wyśrodkowane nad powiązanym znacznikiem. Domyślne okno informacyjne zawiera pogrubiony tytuł, a pod nim (opcjonalnie) krótki opis.

Dodawanie okna informacyjnego

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

Kotlin



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

      

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"));

      

Pokaż/ukryj okno informacyjne

Okna informacyjne służą do reagowania na zdarzenia dotknięcia użytkownika. Jeśli chcesz, możesz automatycznie wyświetlać okno informacyjne, wywołując metodę showInfoWindow() w znaczniku celu. Okno informacyjne można ukryć, dzwoniąc do hideInfoWindow().

Kotlin



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

      

Java


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

      

Możesz też tworzyć okna informacyjne dla poszczególnych znaczników klastrów. Przeczytaj przewodnik na temat dodawania okna informacyjnego dla poszczególnych zbiorów znaczników.

Niestandardowe okna informacyjne

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

Pierwsza z nich (getInfoWindow()) umożliwia wyświetlenie widoku, który będzie używany dla całego okna informacyjnego. Druga opcja (getInfoContents()) pozwala dostosować zawartość okna, zachowując domyślną ramkę okna informacyjnego i tło.

Na poniższych obrazach widać domyślne okno informacyjne, okno informacyjne z dostosowanymi treściami oraz okno informacyjne ze spersonalizowaną ramką i tłem.

Porównanie okien informacyjnych

Zdarzenia w oknie informacyjnym

Przykładowy kod MarkerDemoActivity zawiera przykładowy kod do rejestrowania i obsługi zdarzeń okna informacyjnego.

Za pomocą OnInfoWindowClickListener możesz nasłuchiwać zdarzeń kliknięcia w oknie informacyjnym. Aby ustawić tego detektor na mapie, zadzwoń pod numer GoogleMap.setOnInfoWindowClickListener(OnInfoWindowClickListener). Gdy użytkownik kliknie okno informacyjne, wywołana jest metoda onInfoWindowClick(Marker), a okno informacyjne jest wyróżnione domyślnym kolorem zaznaczenia (szarym).

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()
    }
}

      

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();
    }
}

      

Możesz nasłuchiwać zdarzeń długich kliknięć za pomocą obiektu OnInfoWindowLongClickListener, który możesz ustawić, wywołując metodę GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener). Ten detektor działa podobnie do detektora kliknięć i będzie otrzymywać powiadomienia o zdarzeniach długich kliknięć za pomocą wywołania zwrotnego onInfoWindowClose(Marker).

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

Uwaga na temat odświeżania okna informacyjnego: zdarzenie onInfoWindowClose() jest wywoływane, gdy użytkownik odświeży okno informacyjne, klikając znacznik, który ma już otwarte okno informacyjne. Jeśli jednak automatycznie wywołasz funkcję Marker.showInfoWindow() w otwartym oknie informacyjnym, zdarzenie onInfoWindowClose() nie zostanie uruchomione. To ostatnie działanie opiera się na założeniu, że masz świadomość, że okno informacyjne zamyka się i ponownie otwiera.

Jak wspomnieliśmy w poprzedniej sekcji o oknach informacyjnych, okno informacyjne nie jest podglądem na żywo. Zamiast tego widok jest renderowany na mapie jako obraz. W rezultacie odbiorniki ustawione w widoku są ignorowane i nie można rozróżniać zdarzeń kliknięć w różnych częściach widoku. Odradzamy umieszczanie w niestandardowych oknach informacyjnych komponentów interaktywnych, takich jak przyciski, pola wyboru czy pola tekstowe.