Aggiungere una mappa con un indicatore

Introduzione

Questo tutorial mostra come aggiungere una mappa Google all'app Flutter. La mappa Includa un indicatore, chiamato anche segnaposto, per indicare una località specifica.

Recupero del codice in corso...

Clona o scarica gli esempi di Flutter un repository attendibile. Il campione codice disponibile in nella directory google_maps.

Configurazione del progetto di sviluppo in corso...

Assicurati di aver completato i passaggi descritti in Configurare un progetto Flutter prima di continuare con questo argomento.

1. Importa il pacchetto Google Maps per Flutter

1. Apri il file main.dart nel tuo IDE preferito.
2. Verifica che la seguente istruzione di importazione sia stata aggiunta al file:

import 'package:google_maps_flutter/google_maps_flutter.dart';

2. Aggiungi Google Maps all'app Flutter

Nel widget Scaffold, aggiungi un widget GoogleMap come per il 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 il tuo indicatore.
• L'opzione position consente di impostare la posizione dell'indicatore sulla mappa.

3. Creazione ed esecuzione dell'app

Avvia l'app Flutter utilizzando una delle seguenti opzioni:

1. Dal tuo IDE, fai clic sul pulsante Run
2. Dalla riga di comando, esegui flutter run.

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

Risoluzione dei problemi

• Se non vedi una mappa, verifica di aver ottenuto una chiave API e di averla aggiunta all'app.
• Se hai utilizzato l'identificatore pacchetto iOS per limitare la chiave API, modifica la chiave per aggiungere l'identificatore pacchetto per l'app: com.google.examples.map-with-marker.
• Assicurati di avere una buona connessione Wi-Fi o GPS.
• Utilizza Flutter DevTools per visualizzare i log ed eseguire il debug dell'app.
• Scopri di più su come eseguire 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 alla tua 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 mostra il contenuto delle informazioni quando l'utente tocca un indicatore. Non è necessario aggiungere un listener di clic per l'indicatore se vuoi usare il comportamento predefinito.

Complimenti! Hai creato un'app Flutter che mostra una mappa Google con un per indicare una località specifica e fornire ulteriori informazioni nella una finestra informativa. Hai anche imparato a utilizzare il pacchetto Google Maps per Flutter.