Dodawanie mapy ze znacznikami

Wstęp

Ten samouczek pokazuje, jak dodać mapę Google do aplikacji Flutter. Mapa zawiera znacznik (nazywany również pinezką), który wskazuje konkretną lokalizację.

Pobieram kod

Skopiuj lub pobierz repozytorium przykładów Flutter. Przykładowy kod znajdziesz w katalogu google_maps.

Konfigurowanie projektu programistycznego

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

1. Zaimportuj pakiet Map Google dla Flutter

1. Otwórz plik main.dart w preferowanym IDE.
2. Sprawdź, czy do pliku została dodana ta 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 treść.

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

• Opcja markerId oznacza znacznik.
• Opcja position określa miejsce, w którym znacznik znajduje się na mapie.

3. Tworzenie i uruchamianie aplikacji

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

1. W IDE kliknij przycisk Run
2. Z poziomu wiersza poleceń uruchom polecenie flutter run.

Powinna wyświetlić się mapa ze znacznikiem wyśrodkowanym na Sydney na wschodnim wybrzeżu Australii, podobna do przedstawionej na tej stronie.

Rozwiązywanie problemów

• Jeśli nie widzisz mapy, sprawdź, czy udało Ci się uzyskać klucz interfejsu API i dodać go do aplikacji.
• Jeśli do ograniczenia klucza interfejsu API został użyty identyfikator pakietu na 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 dla programistów Flutter, aby wyświetlić dzienniki i debugować aplikację.
• Dowiedz się więcej o uruchamianiu aplikacji Flutter.

4. Interpretacja kodu

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ę skupioną 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ć domyślnego działania, nie musisz dodawać odbiornika kliknięć do znacznika.

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