Finestre informative

Seleziona piattaforma: Android iOS JavaScript

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

Esempi di codice

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

• MarkerDemoActivity - Java: personalizzazione delle finestre informative e utilizzo dei listener di finestre informative
• MarkerDemoActivity - Kotlin: personalizzazione delle finestre informative e utilizzo dei listener di finestre informative

Introduzione

La finestra informativa 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 verrà chiusa e verrà visualizzata la nuova finestra informativa. Tieni presente che se l'utente fa clic su un indicatore che attualmente mostra una finestra informativa, questa finestra si chiude e si riapre.

Viene mostrata una finestra informativa orientata sullo schermo del dispositivo, centrata sull'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() dell'indicatore corrispondente. Se imposti queste proprietà, verrà visualizzata una finestra informativa ogni volta che fai clic sull'indicatore.

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

      

Mostra/nascondi una finestra informativa

Le finestre informative sono progettate per rispondere agli eventi di tocco degli utenti. Se preferisci, puoi mostrare una finestra informativa in modo programmatico chiamando showInfoWindow() sull'indicatore di destinazione. La finestra informativa può essere nascosta chiamando 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()

      

Puoi anche creare finestre informative per singoli indicatori in cluster. Leggi la guida all'aggiunta di una finestra informativa per singoli indicatori in cluster.

Finestre informative personalizzate

Puoi anche personalizzare i contenuti e il design delle finestre informative. A questo scopo, devi creare un'implementazione concreta dell'interfaccia InfoWindowAdapter e 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 null viene restituire, chiamerà getInfoContents(Marker). Se restituisce anche null, verrà utilizzata la finestra informativa predefinita.

La prima funzionalità (getInfoWindow()) consente di fornire una visualizzazione che verrà utilizzata per l'intera finestra informativa. La seconda funzionalità (getInfoContents()) ti consente di personalizzare i contenuti della finestra, mantenendo comunque il frame e lo sfondo predefiniti della finestra informativa.

Nota: la finestra informativa tracciata non è una visione in diretta. Il rendering viene visualizzato come immagine (utilizzando View.draw(Canvas)) al momento della restituzione. Ciò significa che le modifiche successive alla vista non verranno visualizzate nella 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à nessuna delle interazioni tipiche per una visualizzazione normale, come gli eventi di tocco o gesto. Tuttavia, puoi ascoltare un evento di clic generico nell'intera finestra informativa, come descritto nella sezione seguente.

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

Eventi della finestra informativa

L'esempio di MarkerDemoActivity include un codice di esempio per la registrazione e la gestione degli eventi della finestra informativa.

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

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

      

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 all'ascoltatore dei clic e riceverà una notifica per gli eventi di clic lunghi con un callback onInfoWindowClose(Marker).

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

Nota sull'aggiornamento di una finestra informativa: l'evento onInfoWindowClose() viene attivato se l'utente aggiorna una finestra informativa toccando un indicatore con una finestra informativa aperta. Tuttavia, se chiami in modo programmatico Marker.showInfoWindow() in una finestra informativa aperta, l'evento onInfoWindowClose() non viene attivato. Il secondo comportamento è basato sul presupposto che tu sappia che la finestra informativa si chiuderà e si riaprirà.

Come menzionato nella sezione precedente sulle finestre informative, una finestra informativa non è una visione in diretta. La visualizzazione viene invece visualizzata come immagine sulla mappa. Di conseguenza, tutti gli ascoltatori che imposti nella vista vengono ignorati e non puoi distinguere tra eventi di clic su varie parti della vista. Ti consigliamo di non inserire componenti interattivi, come pulsanti, caselle di controllo o input di testo, all'interno della finestra informativa personalizzata.