Finestre informative

Seleziona la piattaforma: Android iOS JavaScript

Una finestra informativa mostra testo o immagini in una finestra popup sopra la mappa. Le finestre informative sono sempre ancorate a un indicatore. Il loro comportamento predefinito è essere visualizzati quando viene toccato l'indicatore.

Esempi di codice

Il repository ApiDemos su GitHub include un esempio che mostra tutte le funzionalità della finestra informativa:

• MarkerDemoActivity - Java: personalizzazione delle finestre di informazioni e utilizzo di ascoltatori delle finestre di informazioni
• MarkerDemoActivity - Kotlin: personalizzazione delle finestre informative e utilizzo degli ascoltatori delle finestre informative

Introduzione

Una finestra informativa ti consente di mostrare informazioni all'utente quando tocca un indicatore. Viene visualizzata una sola finestra informativa alla volta. Se un utente fa clic su un indicatore, la finestra informativa corrente viene chiusa e viene visualizzata la nuova finestra informativa. Tieni presente che se l'utente fa clic su un indicatore per il quale è attualmente visualizzata una finestra informativa, questa si chiude e si riapre.

Viene disegnata una finestra informativa orientata verso lo schermo del dispositivo, centrata sopra l'indicatore associato. La finestra informativa predefinita contiene il titolo in grassetto, con il testo dello snippet (facoltativo) sotto il titolo.

Aggiungere una finestra informativa

Il modo più semplice per aggiungere una finestra informativa è impostare i metodi title() e snippet() del marker corrispondente. L'impostazione di queste proprietà fa sì che venga visualizzata una finestra informativa ogni volta che viene fatto clic sul marker.

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

      

Mostrare/nascondere una finestra informativa

Le finestre di informazioni sono progettate per rispondere agli eventi di tocco dell'utente. Se preferisci, puoi mostrare una finestra informativa in modo programmatico chiamando showInfoWindow() sull'indicatore target. Una finestra informativa può essere nascosta chiamando 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();

      

Puoi anche creare finestre di informazioni per i singoli indicatori raggruppati. Leggi la guida sull'aggiunta di una finestra informativa per i singoli indicatori raggruppati.

Finestre informative personalizzate

Puoi anche personalizzare i contenuti e il design delle finestre di informazioni. Per farlo, devi creare un'implementazione concreta dell'interfaccia InfoWindowAdapter e poi chiamare GoogleMap.setInfoWindowAdapter() con la tua implementazione. L'interfaccia contiene due metodi da implementare: getInfoWindow(Marker) e getInfoContents(Marker). L'API chiamerà prima getInfoWindow(Marker) e, se viene restituito null, chiamerà getInfoContents(Marker). Se anche questo restituiscenull, verrà utilizzata la finestra informativa predefinita.

Il primo (getInfoWindow()) ti consente di fornire una visualizzazione che verrà utilizzata per l'intera finestra informativa. Il secondo di questi pulsanti (getInfoContents()) ti consente di personalizzare solo i contenuti della finestra, mantenendo inalterati il riquadro e lo sfondo della finestra informativa predefiniti.

Nota: la finestra informativa visualizzata non è una visualizzazione in tempo reale. La vista viene visualizzata come immagine (utilizzando View.draw(Canvas)) al momento del suo ritorno. Ciò significa che eventuali modifiche successive alla visualizzazione non verranno applicate dalla finestra informativa sulla mappa. Per aggiornare la finestra informativa in un secondo momento (ad esempio dopo il caricamento di un'immagine), chiama showInfoWindow(). Inoltre, la finestra informativa non rispetterà alcuna interattività tipica per una visualizzazione normale, come gli eventi tocco o gesto. Tuttavia, puoi ascoltare un evento di clic generico sull'intera finestra informativa, come descritto nella sezione di seguito.

Le immagini seguenti mostrano una finestra informativa predefinita, una finestra informativa con contenuti personalizzati e una finestra informativa con riquadro e sfondo personalizzati.

Eventi della finestra informativa

L'esempio MarkerDemoActivity include codice di esempio per registrare e gestire gli eventi della finestra informativa.

Puoi utilizzare un OnInfoWindowClickListener per ascoltare gli eventi di clic in una finestra informativa. Per impostare questo ascoltatore sulla mappa, chiama GoogleMap.setOnInfoWindowClickListener(OnInfoWindowClickListener). Quando un utente fa clic su una finestra informativa, viene chiamato onInfoWindowClick(Marker) e la finestra informativa viene evidenziata nel colore di sfondo predefinito (grigio).

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

      

Analogamente, puoi ascoltare gli eventi di clic lunghi con un OnInfoWindowLongClickListener, che puoi impostare chiamando GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener). Questo listener si comporta in modo simile al listener di clic e riceverà una notifica per gli eventi di clic lunghi con un callback onInfoWindowClose(Marker).

Per ricevere una notifica quando la finestra informativa si chiude, utilizza un OnInfoWindowCloseListener, che puoi impostare chiamando GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener). Riceverai un onInfoWindowClose(Marker).

Nota sull'aggiornamento di una finestra informativa: l'evento onInfoWindowClose() viene attivato se l'utente aggiorna una finestra informativa toccando un indicatore per il quale è già aperta una finestra informativa. Tuttavia, se chiami Marker.showInfoWindow() in modo programmatico in una finestra di informazioni aperta, l'evento onInfoWindowClose() non viene attivato. Quest'ultimo comportamento si basa sul presupposto che tu sia a conoscenza del fatto che la finestra informativa si chiuderà e riaprirà.

Come accennato nella sezione precedente sulle finestre di informazioni, una finestra di informazioni non è una visualizzazione in tempo reale. La visualizzazione viene invece visualizzata come immagine sulla mappa. Di conseguenza, tutti i listener impostati nella visualizzazione vengono ignorati e non puoi distinguere tra eventi di clic in varie parti della visualizzazione. Ti consigliamo di non inserire componenti interattivi, come pulsanti, caselle di controllo o input di testo, nella finestra informativa personalizzata.