Okna informacyjne

Wybierz platformę: Android iOS JavaScript

W oknie informacyjnym nad mapą wyświetla się tekst lub obrazy w wyskakującym okienku. Okna informacyjne są zawsze zakotwiczone do znacznika. Domyślnie wyświetlają się po dotknięciu znacznika.

Przykładowe fragmenty kodu

Repozytorium API Apigee na GitHubie zawiera przykład, który pokazuje wszystkie funkcje okna informacyjnego:

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

Wstęp

Okno informacyjne pozwala wyświetlić informacje użytkownikowi po kliknięciu znacznika. Wyświetlane jest tylko jedno okno informacyjne naraz. Gdy użytkownik kliknie znacznik, bieżące okno informacyjne zostanie zamknięte i wyświetli się nowe okno informacyjne. Pamiętaj, że jeśli użytkownik kliknie znacznik, który w danej chwili wyświetla okno informacyjne, to okno informacyjne zostanie zamknięte i otwarte ponownie.

Okno informacyjne jest narysowane względem ekranu urządzenia i wyśrodkowane nad powiązanym znacznikiem. Domyślne okno informacyjne zawiera pogrubiony tytuł, a (opcjonalny) tekst pod tytułem.

Dodaj okno informacyjne

Najprostszym sposobem dodania okna informacyjnego jest ustawienie metod title() i snippet() odpowiedniego znacznika. Ustawienie tych właściwości powoduje wyświetlenie okna informacyjnego po kliknięciu znacznika.

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ą zaprojektowane w taki sposób, aby reagować na zdarzenia dotknięcia użytkownika. Jeśli wolisz, możesz wyświetlić okno informacyjne automatycznie, wywołując funkcję showInfoWindow() w znaczniku docelowym. Okno informacyjne można ukryć, wywołując metodę 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 klastrowanych. Przeczytaj przewodnik na temat dodawania okna informacyjnego dla poszczególnych znaczników klastra.

Niestandardowe okna informacyjne

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

Pierwszy z nich (getInfoWindow()) umożliwia utworzenie widoku, który będzie używany dla całego okna informacyjnego. Drugi z tych elementów (getInfoContents()) pozwala dostosować tylko zawartość okna, zachowując przy tym domyślną ramkę i tło okna informacyjnego.

Uwaga: wyświetlane okno informacyjne nie jest podglądem na żywo. W chwili 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 załadowaniu obrazu), wywołaj showInfoWindow(). Okno informacyjne nie uwzględnia też interakcji typowych dla normalnego widoku, takich jak zdarzenia dotyku lub gestów. Możesz jednak nasłuchiwać zdarzenia ogólnego kliknięcia w całym oknie informacyjnym, jak opisano w sekcji poniżej.

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

Zdarzenia w oknie informacyjnym

Przykładowy kod MarkerDemoActivity zawiera przykładowy kod do rejestrowania i obsługi zdarzeń w oknie informacyjnym.

Możesz użyć OnInfoWindowClickListener, aby nasłuchiwać zdarzeń kliknięcia w oknie informacyjnym. Aby ustawić ten odbiornik na mapie, wywołaj GoogleMap.setOnInfoWindowClickListener(OnInfoWindowClickListener). Gdy użytkownik kliknie okno informacyjne, wywoływane jest narzędzie onInfoWindowClick(Marker), a okno informacyjne podświetla się 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();
    }
}

      

Podobnie za pomocą obiektu OnInfoWindowLongClickListener możesz nasłuchiwać zdarzeń długich kliknięć, które można ustawić, wywołując metodę GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener). Działa on podobnie do detektora kliknięć i będzie otrzymywać powiadomienia o zdarzeniach długich kliknięć z wywołaniem zwrotnym onInfoWindowClose(Marker).

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

Uwaga dotycząca 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 informacyjne. Jeśli jednak automatycznie wywołasz Marker.showInfoWindow() w otwartym oknie informacyjnym, zdarzenie onInfoWindowClose() się nie uruchomi. Ostatnie rozwiązanie opiera się na założeniu, że masz świadomość, że okno informacyjne zostanie zamknięte i otwarte ponownie.

Jak wspomnieliśmy w poprzedniej sekcji dotyczącej okien informacyjnych, okno informacyjne nie jest widokiem na żywo. Widok jest natomiast renderowany na mapie jako obraz. W związku z tym wszelkie detektory ustawione w widoku są ignorowane i nie można odróżniać zdarzeń kliknięcia w różnych częściach widoku. Nie zalecamy umieszczania w niestandardowym oknie informacyjnym komponentów interaktywnych, takich jak przyciski, pola wyboru czy pola do wprowadzania tekstu.