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:

• MarkerDemoActivity – Java: dostosowywanie okien informacyjnych i korzystanie z detektorów okien informacyjnych
• MarkerDemoActivity – Kotlin: dostosowywanie okien informacyjnych i używanie detektorów okien informacyjnych

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.

Uwaga: wyświetlone okno informacyjne nie jest podglądem na żywo. W momencie zwrócenia widok jest renderowany jako obraz (za pomocą funkcji View.draw(Canvas)). Oznacza to, że kolejne zmiany w widoku nie będą odzwierciedlane w oknie informacyjnym na mapie. Aby zaktualizować okno informacyjne później (np. po wczytaniu obrazu), wywołaj showInfoWindow(). Okno informacyjne nie uwzględnia też żadnych interakcji typowych dla normalnego widoku, np. zdarzeń dotyku czy gestów. Możesz jednak wykrywać ogólne zdarzenie kliknięcia w całym oknie informacyjnym, co opisano w sekcji poniżej.

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

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.