Dodawanie mapy ze znacznikami

Wprowadzenie

W tym samouczku dowiesz się, jak dodać mapę Google do aplikacji Flutter. Mapa zawiera znacznik, zwany też pinezką, wskazujący konkretną lokalizację.

Pobieranie kodu

Sklonuj lub pobierz repozytorium z przykładowymi aplikacjami na platformę Flutter. Przykładowy kod znajdziesz w katalogu google_maps.

Konfigurowanie projektu programistycznego

Zanim przejdziesz do tego tematu, wykonaj czynności opisane w przewodniku Konfigurowanie projektu Flutter.

1. Importowanie pakietu Map Google dla Flutter

1. Otwórz plik main.dart w wybranym środowisku IDE.
2. Sprawdź, czy do pliku została dodana ta instrukcja importu:

import 'package:google_maps_flutter/google_maps_flutter.dart';

2. Dodawanie Map Google do aplikacji Flutter

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 umożliwia dodanie etykiety do markera.
• Opcja position określa, gdzie znacznik ma się pojawić na mapie.

3. Kompilowanie i uruchamianie aplikacji

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

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

Powinna pojawić się 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 Fluttera, aby wyświetlić logi i debugować aplikację.
• Więcej informacji o uruchamianiu aplikacji Flutter.

4. Zrozumienie 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 markera 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 na platformę Flutter wyświetla zawartość okna informacji, gdy użytkownik kliknie znacznik. Jeśli chcesz używać domyślnego działania, nie musisz dodawać do markera odbiornika kliknięć.

Gratulacje! Masz aplikację Flutter, która wyświetla mapę Google ze znacznikiem wskazującym konkretną lokalizację i dodatkowymi informacjami w oknie informacyjnym. Wiesz już też, jak korzystać z pakietu Map Google dla Fluttera.