Dodawanie mapy ze znacznikami

Wprowadzenie

Z tego samouczka dowiesz się, jak dodać mapę Google do aplikacji we Flutterze. Mapa zawiera znacznik, zwany też pinezką, wskazujący konkretną lokalizację.

Pobieranie kodu

Sklonuj lub pobierz repozytorium z przykładami we Flutterze. Przykładowy kod znajdziesz w katalogu google_maps.

Konfigurowanie projektu programistycznego

Zanim przejdziesz dalej, wykonaj czynności opisane w przewodniku Konfigurowanie projektu we Flutterze.

1. Importowanie pakietu Map Google dla Flutter

1. Otwórz plik main.dart w preferowanym IDE.
2. Sprawdź, czy do pliku został dodany ten import:

import 'package:google_maps_flutter/google_maps_flutter.dart';

2. Dodawanie Map Google do aplikacji we Flutterze

W widżecie Scaffold dodaj widżet GoogleMap jako treść.

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

• Opcja markerId etykietuje znacznik.
• Opcja position określa, gdzie znacznik ma się pojawić na mapie.

3. Kompilowanie i uruchamianie aplikacji

Uruchom aplikację we Flutterze, korzystając z jednej z tych opcji:

1. W IDE kliknij przycisk Run (Uruchom).
2. W wierszu poleceń uruchom polecenie flutter run.

Powinna się wyświetlić mapa ze znacznikiem wyśrodkowanym na Sydney na wschodnim wybrzeżu Australii, podobna 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 iOS, edytuj klucz, aby dodać identyfikator pakietu aplikacji: com.google.examples.map-with-marker.
• Upewnij się, że masz dobre połączenie Wi-Fi lub GPS.
• Użyj Narzędzi deweloperskich we Flutterze, aby wyświetlić logi i debugować aplikację.
• Więcej informacji o uruchamianiu aplikacji we Flutterze

4. Omówienie kodu

Ten kod znajdziesz na GitHub.

1. 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();
      }

2. 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;
      }

3. 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
     }
   }

4. Dodaj widżety znaczników, 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
      ...

5. Dodaj do znacznika okno informacyjne.

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

   Domyślnie pakiet Map Google dla Flutter wyświetla zawartość okna informacyjnego, gdy użytkownik kliknie znacznik. Jeśli chcesz używać działania domyślnego, nie musisz dodawać do znacznika detektora kliknięć.

Gratulacje! Udało Ci się utworzyć aplikację we Flutterze, która wyświetla mapę Google ze znacznikiem wskazującym konkretną lokalizację i dodatkowe informacje w oknie informacyjnym. Dowiedziałeś się też, jak używać pakietu Map Google dla Flutter.