Okna informacyjne

Wybierz platformę: Android iOS JavaScript

Okno informacyjne wyświetla tekst lub obrazy w wyskakującym okienku nad mapą. Okna informacyjne są zawsze powiązane ze znacznikiem. Domyślnie wyświetlają się po kliknięciu znacznika.

Przykładowe fragmenty kodu

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

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

Wprowadzenie

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

Okno informacyjne jest rysowane w orientacji ekranu urządzenia i wyśrodkowane nad powiązanym z nim znacznikiem. Domyślne okno informacyjne zawiera tytuł pogrubiony oraz (opcjonalny) tekst fragmentu pod tytułem.

Dodawanie okna informacyjnego

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.

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

      

Pokazywanie i ukrywanie okna informacyjnego

Okna informacyjne są zaprojektowane tak, aby reagować na zdarzenia dotyku użytkownika. Jeśli wolisz, możesz programowo wyświetlić okno informacyjne, wywołując metodę showInfoWindow() na docelowym znaczniku. 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 zgrupowanych znaczników. Więcej informacji znajdziesz w przewodniku dodawania okna informacyjnego dla poszczególnych zgrupowanych 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 następnie wywołać metodę GoogleMap.setInfoWindowAdapter() z tą implementacją. Interfejs zawiera 2 metody, które musisz zaimplementować: getInfoWindow(Marker) i getInfoContents(Marker). Interfejs API najpierw wywoła metodę getInfoWindow(Marker), a jeśli null zwróci wartość, wywoła metodę getInfoContents(Marker). Jeśli ta metoda też zwróci wartość null, zostanie użyte domyślne okno informacyjne.

Pierwsza z tych metod (getInfoWindow()) umożliwia udostępnienie widoku, który będzie używany w całym oknie informacyjnym. Druga z tych (getInfoContents()) umożliwia dostosowanie tylko zawartości okna ale zachowanie domyślnej ramki i tła okna informacyjnego.

Uwaga: rysowane okno informacyjne nie jest widokiem na żywo. Widok jest renderowany jako obraz (za pomocą metody View.draw(Canvas)) w momencie jego zwrócenia. Oznacza to, że wszelkie późniejsze zmiany w widoku nie będą odzwierciedlane w oknie informacyjnym na mapie. Aby później zaktualizować okno informacyjne (np. po wczytaniu obrazu), wywołaj metodę showInfoWindow(). Ponadto okno informacyjne nie będzie reagować na żadne interakcje typowe dla zwykłego widoku, takie jak zdarzenia dotyku lub gestu. Możesz jednak nasłuchiwać ogólnego zdarzenia kliknięcia w całym oknie informacyjnym, jak opisano w sekcji poniżej.

Obrazy poniżej przedstawiają domyślne okno informacyjne, okno informacyjne z dostosowaną zawartością oraz okno informacyjne z dostosowaną ramką i tłem.

Zdarzenia okna informacyjnego

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

Możesz użyć OnInfoWindowClickListener, aby nasłuchiwać zdarzeń kliknięcia w oknie informacyjnym. Aby ustawić ten detektor na mapie, wywołaj metodę GoogleMap.setOnInfoWindowClickListener(OnInfoWindowClickListener). Gdy użytkownik kliknie okno informacyjne, onInfoWindowClick(Marker) zostanie wywołana a okno informacyjne zostanie podświetlone domyślnym kolorem podświetlenia (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 możesz nasłuchiwać zdarzeń długiego kliknięcia za pomocą detektora OnInfoWindowLongClickListener, który możesz ustawić, wywołując metodę GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener). Ten detektor działa podobnie do detektora kliknięć i będzie powiadamiany o zdarzeniach długiego kliknięcia za pomocą onInfoWindowClose(Marker) wywołania zwrotnego.

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

Uwaga na temat odświeżania okna informacyjnego: zdarzenie onInfoWindowClose() jest wywoływane, jeśli użytkownik odświeży okno informacyjne, klikając znacznik, który ma już otwarte okno informacyjne. Jeśli jednak programowo wywołasz metodę Marker.showInfoWindow() na otwartym oknie informacyjnym, zdarzenie onInfoWindowClose() nie zostanie wywołane. To drugie zachowanie opiera się na założeniu, że wiesz, ż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. Zamiast tego widok jest renderowany jako obraz na mapie. W rezultacie wszystkie detektory ustawione w widoku są ignorowane i nie można odróżnić zdarzeń kliknięcia w różnych częściach widoku. Zalecamy, aby w niestandardowym oknie informacyjnym nie umieszczać komponentów interaktywnych, takich jak przyciski, pola wyboru czy pola tekstowe.