Okna informacyjne

Wybierz platformę: Android iOS JavaScript

Nad mapą w oknie informacyjnym pojawia się tekst lub obrazy w wyskakującym okienku. Okna informacyjne są zawsze zakotwiczone do znacznika. Domyślnie wyświetlane jest po kliknięciu znacznika.

Przykładowe fragmenty kodu

Repozytorium APIDemos na GitHubie zawiera przykład, który przedstawia wszystkie funkcje okien informacyjnych:

Wprowadzenie

Okno informacyjne umożliwia wyświetlanie informacji użytkownikowi, który kliknie znacznik. Wyświetlane jest tylko jedno okno informacyjne w danym momencie. Gdy użytkownik kliknie znacznik, bieżące okno informacyjne zostanie zamknięte i wyświetlone zostanie nowe okno informacyjne. Pamiętaj, że jeśli użytkownik kliknie znacznik, który aktualnie wyświetla okno informacyjne, okno informacyjne zamknie się i ponownie otworzy.

Okno informacyjne jest rysowane zgodnie z ekranem urządzenia i jest wyśrodkowane nad powiązanym znacznikiem. Domyślne okno informacyjne zawiera tytuł pogrubiony, a pod nim (opcjonalnie) krótki opis.

Dodaj okno informacyjne

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.

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

      

Kotlin


val melbourneLatLng = LatLng(-37.81319, 144.96298)
val melbourne = map.addMarker(
    MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne")
        .snippet("Population: 4,137,400")
)

      

Pokaż/ukryj okno informacyjne

Okna informacyjne zostały zaprojektowane tak, aby reagować na zdarzenia dotknięcia użytkownika. Jeśli chcesz, możesz automatycznie wyświetlać okno informacyjne, wywołując metodę showInfoWindow() na znaczniku celu. Okno informacyjne można ukryć, wywołując metodę hideInfoWindow().

Java


final LatLng melbourneLatLng = new LatLng(-37.81319, 144.96298);
Marker melbourne = map.addMarker(
    new MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne"));
melbourne.showInfoWindow();

      

Kotlin


val melbourneLatLng = LatLng(-37.81319, 144.96298)
val melbourne = map.addMarker(
    MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne")
)
melbourne?.showInfoWindow()

      

Możesz też tworzyć okna informacyjne dla pojedynczych grupowanych znaczników. Przeczytaj przewodnik na temat dodawania okna informacyjnego dla pojedynczych znaczników w grupach.

Niestandardowe okna informacyjne

Możesz także dostosować zawartość i wygląd okien informacyjnych. Aby to zrobić, musisz utworzyć konkretną implementację interfejsu InfoWindowAdapter, a potem wywołać metodę GoogleMap.setInfoWindowAdapter() za pomocą swojej implementacji. 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 zwraca też wartość null, zostanie użyte domyślne okno informacyjne.

Pierwszy z nich (getInfoWindow()) umożliwia udostępnienie widoku, który będzie używany dla całego okna informacyjnego. Drugi z nich (getInfoContents()) pozwala dostosować zawartość okna i pozostawić domyślną ramkę i tło okna informacyjnego.

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

Porównanie okna informacyjnego

Zdarzenia w oknie informacyjnym

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

Za pomocą OnInfoWindowClickListener możesz wykrywać zdarzenia kliknięcia w oknie informacyjnym. Aby ustawić ten detektor na mapie, wywołaj GoogleMap.setOnInfoWindowClickListener(OnInfoWindowClickListener). Gdy użytkownik kliknie okno informacyjne, wywołana jest właściwość onInfoWindowClick(Marker), a okno informacyjne jest wyróżnione domyślnym kolorem zaznaczenia (szarym).

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();
    }
}

      

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()
    }
}

      

Podobnie możesz nasłuchiwać zdarzeń długich kliknięć za pomocą tagu OnInfoWindowLongClickListener, który możesz skonfigurować, wywołując metodę GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener). Ten detektor działa podobnie do detektora kliknięć i będzie powiadamiany o zdarzeniach długich kliknięć z wywołaniem zwrotnym onInfoWindowClose(Marker).

Aby otrzymać powiadomienie o zamknięciu okna informacyjnego, użyj klasy OnInfoWindowCloseListener, którą możesz ustawić, wywołując metodę GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener). Otrzymasz oddzwonienie 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 programowo wywołasz metodę Marker.showInfoWindow() w otwartym oknie informacyjnym, zdarzenie onInfoWindowClose() nie zostanie uruchomione. To ostatnie działanie opiera się na założeniu, że zdajesz sobie sprawę, że okno informacyjne zamyka się i ponownie otwiera.

Jak wspomnieliśmy w poprzedniej sekcji na temat okien informacyjnych, okno informacyjne nie jest podglądem na żywo. Zamiast tego widok jest renderowany jako obraz na mapie. W efekcie wszystkie detektory ustawione w widoku są ignorowane i nie można odróżniać zdarzeń kliknięć w poszczególnych częściach widoku. Nie zalecamy umieszczania w niestandardowym oknie informacyjnym elementów interaktywnych, takich jak przyciski, pola wyboru czy pola tekstowe.