Aggiungere una mappa con un indicatore

Introduzione

Questo tutorial mostra come aggiungere una mappa di Google alla tua app Flutter. La mappa include un indicatore, chiamato anche segnaposto, per segnalare un luogo specifico.

Recuperare il codice

Clona o scarica il repository di esempi di Flutter. Il codice di esempio è disponibile nella directory google_maps.

Configurare il progetto di sviluppo

Prima di continuare con questo argomento, assicurati di aver completato i passaggi descritti nella guida Configurare un progetto Flutter.

1. Importare il pacchetto Google Maps per Flutter

1. Apri il file main.dart nell'IDE che preferisci.
2. Verifica che l'istruzione di importazione seguente sia stata aggiunta al file:

import 'package:google_maps_flutter/google_maps_flutter.dart';

2. Aggiungere Google Maps alla tua app Flutter

All'interno del widget Scaffold, aggiungi un widget GoogleMap come corpo.

GoogleMap(
   initialCameraPosition: CameraPosition(
      target: _center,
      zoom: 11.0,
   ),
   markers: {
      const Marker(
         markerId: MarkerId('Sydney'),
         position: LatLng(-33.86, 151.20),
      )
   },
)

• L'opzione markerId etichetta l'indicatore.
• L'opzione position imposta la posizione in cui l'indicatore viene visualizzato sulla mappa.

3. Creare ed eseguire l'app

Avvia l'app Flutter utilizzando una delle seguenti opzioni:

1. Nell'IDE, fai clic sul pulsante Run (Esegui).
2. Dalla riga di comando, esegui flutter run.

Dovresti vedere una mappa con un indicatore centrato su Sydney, sulla costa orientale dell'Australia, simile all'immagine in questa pagina.

Risoluzione dei problemi

• Se non vedi una mappa, controlla di aver ottenuto una chiave API e di averla aggiunta all'app.
• Se hai utilizzato l'identificatore del pacchetto iOS per limitare la chiave API, modificala per aggiungere l'identificatore del pacchetto per l'app: com.google.examples.map-with-marker.
• Assicurati di avere una buona connessione Wi-Fi o GPS.
• Utilizza i Flutter DevTools per visualizzare i log ed eseguire il debug dell'app.
• Puoi scoprire di più sull'esecuzione di un'app Flutter.

4. Nozioni di base sul codice

Questo codice è disponibile su GitHub.

1. Importa i pacchetti necessari e inizializza l'app.

      import 'package:flutter/material.dart';
      import 'package:google_maps_flutter/google_maps_flutter.dart';
   
      void main() => runApp(const MyApp());
   
      class MyApp extends StatefulWidget {
      const MyApp({super.key});
   
      @override
         State<MyApp> createState() => _MyAppState();
      }

2. Crea una mappa centrata su Sydney, in Australia.

   class _MyAppState extends State<MyApp> {
      
      late GoogleMapController mapController;
      
      final LatLng _center = const LatLng(-33.86, 151.20);
      
      void _onMapCreated(GoogleMapController controller) {
         mapController = controller;
      }

3. Aggiungi i widget necessari per visualizzare una mappa in un'app.

   @override
   Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(
             title: const Text('Maps Sample App'),
             backgroundColor: Colors.green[700],
           ),
           body: GoogleMap(
               onMapCreated: _onMapCreated,
               initialCameraPosition: CameraPosition(
                 target: _center,
                 zoom: 11.0,
               ), // CameraPosition
           ), // GoogleMap
         ), // Scaffold
       ); // MaterialApp
     }
   }

4. Aggiungi i widget degli indicatori per aggiungere il widget all'app.

      body: GoogleMap(
         onMapCreated: _onMapCreated,
         initialCameraPosition: CameraPosition(
            target: _center,
            zoom: 11.0,
         ),
         markers: {
            const Marker(
                  markerId: const MarkerId("Sydney"),
                  position: LatLng(-33.86, 151.20),
               ), // Marker
         }, // markers
      ), // GoogleMap
      ...

5. Aggiungi una finestra informativa all'indicatore.

         const Marker(
               markerId: const MarkerId("Sydney"),
               position: LatLng(-33.86, 151.20),
               infoWindow: InfoWindow(
                  title: "Sydney",
                  snippet: "Capital of New South Wales",
               ), // InfoWindow
         ), //Marker
         ...

   Per impostazione predefinita, il pacchetto Google Maps per Flutter visualizza i contenuti della finestra informativa quando l'utente tocca un indicatore. Non è necessario aggiungere un click listener per l'indicatore se vuoi utilizzare il comportamento predefinito.

Complimenti! Hai creato un'app Flutter che visualizza una mappa di Google con un indicatore per segnalare un luogo specifico e fornire ulteriori informazioni in una finestra informativa. Hai anche imparato a utilizzare il pacchetto Google Maps per Flutter.