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:

Wprowadzenie

Okno informacyjne pozwala wyświetlić informacje użytkownikowi po kliknięciu znacznika. Wyświetlane jest tylko jedno okno informacyjne naraz. Jeśli użytkownik kliknie znacznik, bieżące okno z informacjami zostanie zamknięte i pojawi się nowe okno z informacjami. 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 rysowane na ekranie urządzenia i wyśrodkowane nad powiązanym znacznikiem. Domyślne okno informacji zawiera tytuł pogrubiony oraz (opcjonalnie) tekst fragmentu pod tytułem.

Dodawanie okna informacyjnego

Najprostszym sposobem dodania okna informacyjnego jest ustawienie metod title()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 informacyjne są zaprojektowane w taki sposób, aby reagować na zdarzenia dotknięcia 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. Zapoznaj się z przewodnikiem dodawania okna informacyjnego dla poszczególnych grupowanych znaczników.

Okna informacyjne niestandardowe

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: getInfoWindow(Marker)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.

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

Porównanie okna informacyjnego

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). Działa on podobnie do detektora kliknięć i będzie otrzymywać powiadomienia w przypadku zdarzeń 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 informacji: zdarzenie onInfoWindowClose() jest wywoływane, gdy użytkownik odświeża okno informacji przez kliknięcie znacznika, które ma już otwarte okno informacji. 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 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. W oknie informacji nie umieszczaj elementów interaktywnych, takich jak przyciski, pola wyboru czy pola tekstowe.