מבוא
במדריך הזה תלמדו איך להוסיף מפת Google לאפליקציית Flutter. המפה שכולל סמן, שנקרא גם סיכה, כדי לציין מיקום ספציפי.
קבלת הקוד
אפשר לשכפל או להוריד את הדוגמאות שלFlutter
מאגר הנתונים. הדוגמה
אפשר למצוא את הקוד
הספרייה google_maps
.
הגדרת פרויקט הפיתוח
עליכם לוודא שהשלמתם את השלבים המפורטים במאמר הגדרת פרויקט Flutter. לפני שממשיכים בנושא.
1. ייבוא חבילת מפות Google עבור Flutter
- פותחים את הקובץ
main.dart
בסביבת הפיתוח המשולבת (IDE) המועדפת. - מוודאים שהצהרת הייבוא הבאה נוספה לקובץ:
import 'package:google_maps_flutter/google_maps_flutter.dart';
2. הוספה של מפות Google לאפליקציית Flutter
בווידג'ט Scaffold
, צריך להוסיף את הווידג'ט GoogleMap
בתור
את הגוף.
GoogleMap( initialCameraPosition: CameraPosition( target: _center, zoom: 11.0, ), markers: { const Marker( markerId: MarkerId('Sydney'), position: LatLng(-33.86, 151.20), ) }, )
- האפשרות
markerId
מוסיפה תוויות לסמן. - האפשרות
position
קובעת את המיקום שבו יופיע הסמן במפה.
3. יצירה והפעלה של האפליקציה
מפעילים את אפליקציית Flutter באמצעות אחת מהאפשרויות הבאות:
- בסביבת הפיתוח המשולבת, לוחצים על הלחצן
Run
. - מריצים את הפקודה
flutter run
משורת הפקודה.
אתה אמור לראות מפה עם סמן במרכז סידני בחוף המזרחי של אוסטרליה, בדומה לתמונה בדף הזה.
פתרון בעיות
- אם המפה לא מופיעה, צריך לבדוק אם קיבלתם מפתח API ושהוספתם אותו לאפליקציה.
- אם השתמשתם במזהה החבילה של iOS כדי להגביל את מפתח ה-API, צריך לערוך את המפתח ולהוסיף את מזהה החבילה של האפליקציה:
com.google.examples.map-with-marker
. - מוודאים שיש לכם חיבור טוב ל-Wi-Fi או ל-GPS.
- אפשר להשתמש בכלי הפיתוח ל-Flutter כדי לצפות ביומנים ולנפות באגים באפליקציה.
- ניתן לקבל מידע נוסף על הפעלת אפליקציה של Flutter.
4. הבנת הקוד
ניתן למצוא את הקוד הזה ב- GitHub.
- מייבאים את החבילות הנדרשות ומפעילים את האפליקציה.
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(); }
- צור מפה במרכז סידני, אוסטרליה.
class _MyAppState extends State<MyApp> { late GoogleMapController mapController; final LatLng _center = const LatLng(-33.86, 151.20); void _onMapCreated(GoogleMapController controller) { mapController = controller; }
- מוסיפים את הווידג'טים הנדרשים כדי להציג מפה באפליקציה.
@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 } }
- מוסיפים את הווידג'טים של הסמנים כדי להוסיף את הווידג'ט לאפליקציה.
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 ...
- הוספת חלון מידע לסמן.
כברירת מחדל, חבילת מפות Google ל-Flutter מציגה את תוכן המידע חלון כשהמשתמש מקיש על סמן. אין צורך להוסיף אוזן קליק של הסמן, אם אתה שמח להשתמש בהתנהגות ברירת המחדל.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 שמציגה מפת Google עם כדי לציין מיקום מסוים ולספק מידע נוסף חלון מידע. למדת גם איך להשתמש בחבילת מפות Google עבור חבילת Flutter.