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
-
main.dart
dosyanızı tercih ettiğiniz IDE'de açın. - 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 ş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:
- IDE'nizde
Run
düğmesini tıklayın - 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.
- 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(); }
- 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; }
- 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 } }
- 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 ...
- İşaretçiye bir bilgi penceresi ekleyin.
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.const Marker( markerId: const MarkerId("Sydney"), position: LatLng(-33.86, 151.20), infoWindow: InfoWindow( title: "Sydney", snippet: "Capital of New South Wales", ), // InfoWindow ), //Marker ...
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.