İşaretçili Harita Ekleme

Giriş

İşaretçili Harita Örneği

Bu eğiticide, Flutter uygulamanıza Google Haritası ekleme işlemi gösterilmektedir. Haritada, belirli bir konumu belirtmek için işaretçi (diğer adıyla raptiye) 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 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. Aşağıdaki içe aktarma ifadesinin dosyaya 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 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 resme benzer şekilde, Avustralya'nın doğu kıyısında Sidney'e odaklanmış bir işaretçinin bulunduğu haritayı görmeniz gerekir.

Sorun giderme

  • Harita görmüyorsanız API anahtarı aldığınızdan ve bunu uygulamaya eklediğinizden emin olun.
  • API anahtarını kısıtlamak için iOS paket kimliğini kullandıysanız anahtarı düzenleyerek uygulama için paket kimliğini ekleyin: com.google.examples.map-with-marker.
  • İyi bir kablosuz 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 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 şehrini merkez alan bir harita oluştur. 
    class _MyAppState extends State<MyApp> {
   
   late GoogleMapController mapController;
   
   final LatLng _center = const LatLng(-33.86, 151.20);
   
   void _onMapCreated(GoogleMapController controller) {
      mapController = controller;
   }
  3. Uygulamada harita göstermek 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. İşarete 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österir. Varsayılan davranışı kullanmaktan memnunsanız işaretçi için tıklama dinleyici eklemenize gerek yoktur.

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