İşaretçili Harita Ekleme

Giriş

Bu eğitimde, Flutter uygulamanıza nasıl Google haritası ekleyeceğiniz gösterilmektedir. Harita, belirli bir konumu belirtmek için raptiye olarak da adlandırılan bir işaretçi içerir.

Kodu alma

Flutter örnekleri deposunu klonlayın veya indirin. Örnek koda google_maps dizininden ulaşabilirsiniz.

Geliştirme projenizi oluşturma

Bu konuya devam etmeden önce Flutter projesi oluşturma kılavuzunda açıklanan 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. Dosyaya aşağıdaki içe aktarma beyanının eklendiğini doğrulayın:

import 'package:google_maps_flutter/google_maps_flutter.dart';

2. Flutter uygulamanıza Google Haritalar'ı ekleme

Scaffold widget'ına, 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 nerede görüneceğini belirler.

3. Uygulamanızı derleyip çalıştırma

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

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

Bu sayfadaki resme benzer şekilde, Avustralya'nın doğu kıyısındaki Sidney'i merkeze alan bir işaretçi içeren bir harita görürsünüz.

Sorun giderme

• Harita görmüyorsanız 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 anahtarı düzenleyerek uygulamanın paket tanımlayıcısını ekleyin: com.google.examples.map-with-marker.
• İyi bir kablosuz bağlantınız veya GPS bağlantınız olduğundan emin olun.
• Günlükleri görüntülemek ve uygulamada hata ayıklama yapmak için Flutter DevTools'u 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. Avustralya'nın Sidney kentini merkeze alan 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 gereken 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. İşaretçi widget'larını eklemek için widget'ı uygulamanıza 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 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
         ...

   Flutter için Google Haritalar paketi, kullanıcı bir işaretçiye dokunduğunda varsayılan olarak bilgi penceresinin içeriğini gösterir. Varsayılan davranışı kullanmak istiyorsanız işaretçi için tıklama dinleyici eklemeniz gerekmez.

Tebrikler! Belirli bir konumu belirtmek için işaretçi içeren bir Google haritası gösteren ve bilgi penceresinde ek bilgiler sağlayan bir Flutter uygulaması oluşturdunuz. Ayrıca Flutter için Google Haritalar paketini nasıl kullanacağınızı da öğrendiniz.