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 nella guida Configurare un progetto Flutter prima di continuare con questo argomento.
1. Importa il pacchetto Google Maps per Flutter
- Apri il file
main.dart
nel tuo IDE preferito. - 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:
- Dal tuo IDE, fai clic sul pulsante
Run
- 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.
- 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(); }
- 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; }
- 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 } }
- 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 ...
- Aggiungi una finestra informativa all'indicatore.
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.const Marker( markerId: const MarkerId("Sydney"), position: LatLng(-33.86, 151.20), infoWindow: InfoWindow( title: "Sydney", snippet: "Capital of New South Wales", ), // InfoWindow ), //Marker ...
Complimenti! Hai creato un'app Flutter che mostra una mappa Google con un per indicare una località specifica e fornire informazioni aggiuntive una finestra informativa. Hai anche imparato a utilizzare il pacchetto Google Maps per Flutter.