Dodawanie mapy ze znacznikami

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.

Konfiguruję projekt programistyczny

Wykonaj czynności opisane w artykule 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 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. Tworzenie i uruchamianie aplikacji

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

1. W swoim IDE kliknij przycisk Run.
2. 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 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

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świetlenia 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 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
      ...

5. Dodaj okno informacyjne do znacznika.

         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 treść informacji gdy użytkownik kliknie znacznik. Nie musisz dodawać odbiornika kliknięć dla znacznika, jeśli chcesz korzystać z działania domyślnego.

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.