Okna informacyjne

Wybierz platformę: Android iOS JavaScript

Okno informacyjne wyświetla tekst lub obrazy w wyskakującym okienku nad mapą. Okna informacji są zawsze zakotwiczone do oznacznika. Domyślnie wyświetlają się one po kliknięciu znacznika.

Przykładowe fragmenty kodu

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

• MarkerDemoActivity – Java: dostosowywanie okien informacyjnych i używanie odbiorników okien informacyjnych
• MarkerDemoActivity – Kotlin: dostosowywanie okien informacyjnych i używanie odbiorników okien informacyjnych.

Wprowadzenie

Okno informacyjne umożliwia wyświetlanie użytkownikowi informacji po kliknięciu przez niego znacznika. W danym momencie wyświetlane jest tylko jedno okno informacyjne. Jeśli użytkownik kliknie znacznik, bieżące okno z informacjami zostanie zamknięte i pojawi się nowe okno z informacjami. Jeśli użytkownik kliknie znacznik, który wyświetla obecnie okno informacyjne, okno to się zamknie i otworzy ponownie.

Okno z informacjami jest wyświetlane na ekranie urządzenia, na środku nad powiązanym znacznikiem. Domyślne okno informacji zawiera tytuł w pogrubieniu oraz (opcjonalnie) tekst fragmentu kodu 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 za każdym razem, gdy klikniesz ten znacznik, pojawi się okno z informacjami.

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 z informacjami

Okna z informacjami są projektowane tak, aby reagowały na dotyk użytkownika. Jeśli wolisz, możesz wyświetlić okno informacyjne programowo, wywołując funkcję showInfoWindow() na znaczniku docelowym. Okno z informacjami można ukryć, wywołując 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 punktów skupionych. Przeczytaj przewodnik dotyczący dodawania okna informacji dla poszczególnych grupowanych znaczników.

Okna informacyjne niestandardowe

Możesz też dostosować zawartość i projekt okien z informacjami. Aby to zrobić, musisz utworzyć konkretne wdrożenie interfejsu InfoWindowAdapter, a potem wywołać metodę GoogleMap.setInfoWindowAdapter() w ramach tego wdrożenia. Interfejs zawiera 2 metody: getInfoWindow(Marker) i getInfoContents(Marker). API najpierw wywoła funkcję getInfoWindow(Marker), a jeśli zwróci ona wartość null, wywoła funkcję getInfoContents(Marker). Jeśli zwróci ono wartość null, zostanie użyte domyślne okno z informacjami.

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

Uwaga: wyświetlane okno z informacjami nie jest widokiem na żywo. Widok jest renderowany jako obraz (za pomocą funkcji View.draw(Canvas)) w momencie zwrócenia. Oznacza to, że wszelkie późniejsze zmiany widoku nie będą odzwierciedlane w oknie informacji na mapie. Aby zaktualizować okno informacji później (np. po załadowaniu obrazu), wybierz showInfoWindow(). Ponadto okno z informacjami nie będzie uwzględniać żadnej interakcji typowej dla normalnego widoku, takiej jak dotyk czy gesty. Możesz jednak słuchać ogólnego zdarzenia kliknięcia w całym oknie informacji, jak opisano w sekcji poniżej.

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

Zdarzenia okna informacyjnego

Plik MarkerDemoActivity (próbka) zawiera przykładowy kod do rejestrowania i obsługiwania zdarzeń okna informacyjnego.

Możesz użyć tagu OnInfoWindowClickListener, aby rejestrować zdarzenia kliknięcia w oknie z informacjami. Aby ustawić tego słuchacza na mapie, wywołaj funkcję GoogleMap.setOnInfoWindowClickListener(OnInfoWindowClickListener). Gdy użytkownik kliknie okno z informacjami, zostanie wywołana funkcja onInfoWindowClick(Marker), a okno z informacjami zostanie wyróżnione domyślnym kolorem wyróżnienia (szary).

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 wykrywać zdarzenia długiego kliknięcia za pomocą parametru OnInfoWindowLongClickListener, który możesz ustawić, wywołując funkcję GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener). Ten detektor działa podobnie jak detektor kliknięć i będzie powiadamiany o zdarzeniach długiego kliknięcia za pomocą wywołania zwrotnego onInfoWindowClose(Marker).

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

Uwaga dotycząca odświeżania okna informacyjnego: zdarzenie onInfoWindowClose() jest wywoływane, gdy użytkownik odświeża okno informacyjne przez kliknięcie znacznika, które ma już otwarte okno informacyjne. Jeśli jednak wywołasz Marker.showInfoWindow() programowo w otwartym oknie informacji, zdarzenie onInfoWindowClose() się nie uruchomi. To drugie zachowanie zakłada, że wiesz, że okno z informacjami zamknie się i otworzy ponownie.

Jak wspomnieliśmy w poprzedniej sekcji dotyczącej okien z informacjami, okno z informacjami nie jest widokiem na żywo. Zamiast tego widok jest renderowany jako obraz na mapie. W efekcie wszystkie detektory ustawione w widoku są ignorowane i nie możesz rozróżniać zdarzeń kliknięcia w różnych częściach widoku. Zalecamy, aby w oknie informacji nie umieszczać elementów interaktywnych, takich jak przyciski, pola wyboru czy pola tekstowe.