Introduzione
Questo tutorial ti mostra come aggiungere una mappa di Google alla tua app Flutter. La mappa include un indicatore, chiamato anche segnaposto, per indicare una posizione specifica.
Ricezione del codice
Clona o scarica il repository
gli esempi Flutter. Il codice di esempio si trova nella directory google_maps
.
Configurazione del progetto di sviluppo
Prima di continuare con questo argomento, assicurati di aver completato i passaggi descritti nella guida Configurare un progetto Flutter.
1. Importa il pacchetto Google Maps per Flutter
- Apri il file
main.dart
nel tuo IDE preferito. - Verifica che al file sia stata aggiunta la seguente istruzione di importazione:
import 'package:google_maps_flutter/google_maps_flutter.dart';
2. Aggiungi 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
consente di etichettare l'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 dell'Australia, simile all'immagine in questa pagina.
Risolvere i problemi
- Se non viene visualizzata una mappa, verifica di aver ottenuto una chiave API e di averla aggiunta all'app.
- Se hai utilizzato l'identificatore bundle iOS per limitare la chiave API, modifica la chiave per aggiungere l'identificatore bundle 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ù sull'esecuzione di 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, 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.
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 for Flutter mostra i contenuti della finestra informativa quando l'utente tocca un indicatore. Non è necessario aggiungere un listener di clic per l'indicatore se vuoi utilizzare il comportamento predefinito.
Complimenti! Hai creato un'app Flutter che mostra una mappa di Google con un indicatore per indicare una determinata posizione e fornire informazioni aggiuntive in una finestra informativa. Hai anche imparato a utilizzare il pacchetto Google Maps per Flutter.