Finestre informative

Seleziona la piattaforma: Android iOS JavaScript

Una finestra informativa con testo o immagini in una finestra popup sopra la mappa. Le finestre informazioni sono sempre ancorate a un indicatore. Il loro comportamento predefinito è visualizzato 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 dell'utilizzo dei listener di 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 che attualmente mostra una finestra informativa, questa si chiude e si riapre.

La finestra informativa viene disegnata orientata rispetto allo 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.

Aggiungi una finestra informativa

Il modo più semplice per aggiungere una finestra informativa è impostare i metodi title() e snippet() dell'indicatore corrispondente. Impostando queste proprietà, ogni volta che si fa clic sull'indicatore verrà visualizzata una finestra informativa.

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 informative sono progettate per rispondere agli eventi touch dell'utente. Se preferisci, puoi mostrare una finestra informativa in modo programmatico richiamando showInfoWindow() sull'indicatore di destinazione. È possibile nascondere una finestra informativa chiamando il numero 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 informative per singoli indicatori in cluster. Leggi la guida su come aggiungere una finestra informativa per singoli indicatori raggruppati.

Finestre informative personalizzate

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

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

Nota: la finestra informativa disegnata non è una visione in diretta. La visualizzazione viene visualizzata come un'immagine (utilizzando View.draw(Canvas)) nel momento in cui viene restituita. Ciò significa che eventuali modifiche successive alla vista non verranno riportate 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 rispetta l'interattività tipica di una visualizzazione normale, come gli eventi tocco o gesto. Tuttavia, puoi ascoltare un evento di clic generico nell'intera finestra informativa, come descritto nella sezione di seguito.

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

Eventi della finestra informativa

L'esempio 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 relativi ai clic in una finestra informativa. Per impostare questo listener 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 con il colore di evidenziazione 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();
    }
}

      

Allo stesso modo, puoi rimanere in ascolto degli eventi di clic lunghi con una 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 notifiche quando si chiude la finestra informativa, utilizza una 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 per cui è già stata aperta una finestra informativa. Tuttavia, se chiami in modo programmatico Marker.showInfoWindow() in una finestra informativa aperta, l'evento onInfoWindowClose() non si attiva. Quest'ultimo comportamento si basa sul presupposto che la finestra informativa verrà chiusa e riaperta.

Come menzionato nella sezione precedente sulle finestre informative, una finestra informativa non è una visione in tempo reale. La visualizzazione viene invece rappresentata come immagine sulla mappa. Di conseguenza, tutti i listener impostati nella vista vengono ignorati e non possono distinguere gli eventi di clic in varie parti della visualizzazione. Non è consigliabile inserire componenti interattivi, come pulsanti, caselle di controllo o input di testo, all'interno della finestra informativa personalizzata.