İşaretçili Harita Ekleme

Giriş

Bu eğitim, Flutter uygulamanıza nasıl Google haritası ekleyeceğinizi gösterir. Haritada, belirli bir konumu belirtmek için raptiye olarak da adlandırılan bir işaretçi bulunur.

Kodu alma

Flutter örnekleri deposunu klonlayın veya indirin. Örnek kod google_maps dizininde bulunabilir.

Geliştirme projenizi oluşturma

Bu konuya devam etmeden önce Flutter projesi oluşturma kılavuzunda belirtilen adımları tamamladığınızdan emin olun.

1. Flutter için Google Haritalar paketini içe aktarma

1. main.dart dosyanızı tercih ettiğiniz IDE'de açın.
2. Aşağıdaki içe aktarma ifadesinin dosyaya eklendiğini doğrulayın:

import 'package:google_maps_flutter/google_maps_flutter.dart';

2. Google Haritalar'ı Flutter uygulamanıza ekleme

Scaffold widget'ında, gövde olarak bir GoogleMap widget'ı ekleyin.

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

• markerId seçeneği, işaretçinizi etiketler.
• position seçeneği, işaretçinin haritanızda görüneceği yeri belirler.

3. Uygulamanızı oluşturma ve çalıştırma

Aşağıdaki seçeneklerden birini kullanarak Flutter uygulamasını başlatın:

1. IDE'nizden Run düğmesini tıklayın
2. Komut satırından flutter run komutunu çalıştırın.

Bu sayfadaki görüntüye benzer şekilde, Avustralya'nın doğu yakasında Sidney merkezli bir işaretçi bulunan bir harita göreceksiniz.

Sorun giderme

• Harita görmüyorsanız bir API anahtarı edinip uygulamaya eklediğinizden emin olun.
• API anahtarını kısıtlamak için iOS paket tanımlayıcısını kullandıysanız uygulamanın paket tanımlayıcısını eklemek için anahtarı düzenleyin: com.google.examples.map-with-marker.
• İyi bir WiFi veya GPS bağlantınızın olduğundan emin olun.
• Günlükleri görüntülemek ve uygulamada hata ayıklamak için Flutter Geliştirici Araçları'nı kullanın.
• Flutter uygulaması çalıştırma hakkında daha fazla bilgi edinebilirsiniz.

4. Kodu anlama

Bu kodu GitHub'da bulabilirsiniz.

1. Gerekli paketleri içe aktarın ve uygulamayı başlatın.

      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. Sidney, Avustralya merkezli bir harita oluşturun.

   class _MyAppState extends State<MyApp> {
      
      late GoogleMapController mapController;
      
      final LatLng _center = const LatLng(-33.86, 151.20);
      
      void _onMapCreated(GoogleMapController controller) {
         mapController = controller;
      }

3. Bir uygulamada Harita görüntülemek için gerekli widget'ları ekleyin.

   @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. Widget'ı uygulamanıza eklemek için işaretçi widget'ları ekleyin.

      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. İşaretçiye bir bilgi penceresi ekleyin.

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

   Varsayılan olarak, kullanıcı bir işaretçiye dokunduğunda Flutter için Google Haritalar paketi, bilgi penceresinin içeriğini görüntüler. Varsayılan davranışı kullanmaktan memnunsanız işaretçi için bir tıklama işleyici eklemenize gerek yoktur.

Tebrikler! Belirli bir konumu belirtmek ve bir bilgi penceresinde ek bilgi sağlamak için, işaretçi içeren bir Google haritası görüntüleyen bir Flutter uygulaması geliştirdiniz. Ayrıca Flutter için Google Haritalar paketini kullanmayı da öğrendiniz.