Wprowadzenie
Z tego samouczka dowiesz się, jak dodać mapę Google do aplikacji Flutter. Mapa zawiera znacznik, nazywany również pinezką, wskazującym konkretną lokalizację.
Pobieram kod
Klonowanie lub pobieranie przykładów z usługi Flutter
. Przykład
znajdziesz w
w katalogu google_maps
.
Konfigurowanie projektu programistycznego
Wykonaj czynności opisane w artykule Konfigurowanie projektu Flutter. .
1. Importowanie pakietu Map Google dla Flutter
- Otwórz plik
main.dart
w preferowanym IDE. - Sprawdź, czy do pliku został dodany ten instrukcja importu:
import 'package:google_maps_flutter/google_maps_flutter.dart';
2. Dodaj Mapy Google do aplikacji Flutter
W widżecie Scaffold
dodaj widżet GoogleMap
jako
ciało.
GoogleMap( initialCameraPosition: CameraPosition( target: _center, zoom: 11.0, ), markers: { const Marker( markerId: MarkerId('Sydney'), position: LatLng(-33.86, 151.20), ) }, )
- Opcja
markerId
oznacza etykietami znacznik. - Opcja
position
określa miejsce, w którym znacznik znajduje się na mapie.
3. Kompilowanie i uruchamianie aplikacji
Uruchom aplikację Flutter, korzystając z jednej z tych opcji:
- W swoim IDE kliknij przycisk
Run
. - W wierszu poleceń uruchom polecenie
flutter run
.
Powinna zostać wyświetlona mapa ze znacznikiem wyśrodkowana na Sydney na wschodnim wybrzeżu Australia, podobny do obrazu na tej stronie.
Rozwiązywanie problemów
- Jeśli nie widzisz mapy, sprawdź, czy masz klucz interfejsu API i czy został on dodany do aplikacji.
- Jeśli do ograniczenia klucza interfejsu API używasz identyfikatora pakietu na iOS, zmień klucz, aby dodać identyfikator pakietu aplikacji:
com.google.examples.map-with-marker
. - Upewnij się, że masz dobre połączenie Wi-Fi lub GPS.
- Za pomocą Flutter DevTools możesz wyświetlać logi i debugować aplikację.
- Dowiedz się więcej o uruchamianiu aplikacji Flutter.
4. Interpretacja kodu
Ten kod znajdziesz na GitHub
- Zaimportuj niezbędne pakiety i zainicjuj aplikację.
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(); }
- Utwórz mapę wyśrodkowaną na Sydney w Australii.
class _MyAppState extends State<MyApp> { late GoogleMapController mapController; final LatLng _center = const LatLng(-33.86, 151.20); void _onMapCreated(GoogleMapController controller) { mapController = controller; }
- Dodaj widżety potrzebne do wyświetlania mapy w aplikacji.
@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 } }
- Dodaj widżety ze znacznikami, aby dodać widżet do aplikacji.
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 ...
- Dodaj do znacznika okno z informacjami.
Domyślnie pakiet Map Google dla Flutter wyświetla treść informacji gdy użytkownik kliknie znacznik. Nie musisz dodawać odbiornika kliknięć dla znacznika, jeśli chcesz korzystać z działania domyślnego.const Marker( markerId: const MarkerId("Sydney"), position: LatLng(-33.86, 151.20), infoWindow: InfoWindow( title: "Sydney", snippet: "Capital of New South Wales", ), // InfoWindow ), //Marker ...
Gratulacje! Masz aplikację Flutter, która wyświetla mapę Google można wskazać konkretną lokalizację i podać dodatkowe informacje lub okna informacyjnego. Wiesz już również, jak korzystać z pakietu Map Google na potrzeby Flutter.