İşaretçili Harita Ekleme

Giriş

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

Kodu alma

Flutter örneklerini klonlayın veya indirin depo. Örnek kodu şurada bulabilirsiniz: google_maps dizinini oluşturur.

Geliştirme projenizi oluşturma

Flutter projesi kurma başlıklı makalede belirtilen adımları tamamladığınızdan emin olun rehberini inceleyin.

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'ına şu şekilde bir GoogleMap widget'ı ekleyin: ele alacağız.

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ı oluşturma ve ç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.

Doğu kıyısında, Sidney'in ortasında bir işaretçi bulunan bir harita göreceksiniz. Avustralya'da, bu sayfadaki resme benzer şekilde.

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 anahtarı düzenleyerek uygulamanın paket tanımlayıcısını ekleyin: com.google.examples.map-with-marker.
• İyi bir WiFi veya GPS bağlantınız 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 bulabileceğiniz yerler: GitHub'a gidin.

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 şehrinde bulunan 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. Widget'ı uygulamanıza eklemek için işaretçi widget'larını 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 Flutter için Google Haritalar paketi, Google Haritalar'daki bilgilerin kullanıcı bir işaretçiye dokunduğunda gösterilecek. Tıklama işleyici eklemeye gerek yoktur kullanabilirsiniz.

Tebrikler! Flutter'ı geliştirdiniz. Bir Google haritasında işaretçiyi kullanarak belirli bir konumu belirtmek ve daha fazla bilgi vermek için bir bilgi penceresi. Ayrıca Flutter için Google Haritalar paketini kullanmayı da öğrendiniz.