Dodawanie mapy ze znacznikami

Wprowadzenie

W tym samouczku dowiesz się, jak dodać do aplikacji Flutter mapę Google. Na mapie znajduje się znacznik (nazwany też pinezką), który wskazuje konkretną lokalizację.

Pobieranie kodu

Sklonuj lub pobierz repozytorium Flutter Samples. Przykładowy kod znajdziesz w katalogu google_maps.

Konfigurowanie projektu programistycznego

Zanim przejdziesz do dalszej części tego tematu, wykonaj czynności opisane w tym przewodniku.

1. Importowanie pakietu Map Google dla Flutter

1. Otwórz plik main.dart w wybranym środowisku IDE.
2. Sprawdź, czy do pliku został dodany ten element 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 oznacza Twój znacznik.
• Opcja position określa, gdzie na mapie ma się wyświetlać znacznik.

3. Kompilowanie i uruchamianie aplikacji

Uruchom aplikację Flutter, korzystając z jednego z tych sposobów:

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

Powinna Ci się wyświetlić mapa z oznacznikiem wyśrodkowanym na Sydney na wschodnim wybrzeżu Australii, podobna do tej 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żyjesz identyfikatora pakietu na iOS, zmodyfikuj klucz, aby dodać identyfikator pakietu aplikacji: com.google.examples.map-with-marker.
• Upewnij się, że masz dobre połączenie z Wi-Fi lub GPS.
• Aby wyświetlać logi i debugować aplikację, użyj Narzędzi deweloperskich Fluttera.
• Dowiedz się więcej o uruchamianiu aplikacji Flutter.

4. Interpretowanie kodu

Ten kod znajdziesz na GitHub.

1. Zaimportuj niezbędne pakiety i inicjuj 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 markeró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 z informacjami.

         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 Fluttera wyświetla zawartość okna informacji, gdy użytkownik kliknie znacznik. Jeśli wystarcza Ci działanie domyślne, nie musisz dodawać do markera żadnych metod obsługi kliknięcia.

Gratulacje! Utworzyłeś/utworzyłaś aplikację Flutter, która wyświetla mapę Google z oznacznikiem wskazujący konkretny punkt i dodatkowe informacje w oknie informacji. Poznasz też, jak korzystać z pakietu Map Google dla Fluttera.