הוספת מפה עם סמן

מבוא

במדריך הזה תלמדו איך להוסיף מפה של Google לאפליקציה שלכם ב-Flutter. המפה כוללת סמן, שנקרא גם סיכה, כדי לציין מיקום ספציפי.

קבלת הקוד

מעתיקים (clone) או מורידים את מאגר הדוגמאות של Flutter. הקוד לדוגמה נמצא בספרייה google_maps.

הגדרת פרויקט הפיתוח

לפני שממשיכים בנושא הזה, חשוב לוודא שביצעתם את השלבים שמפורטים במדריך הגדרת פרויקט Flutter.

1. ייבוא החבילה של מפות Google ל-Flutter

1. פותחים את קובץ ה-main.dart בסביבת הפיתוח המשולבת (IDE) המועדפת.
2. מוודאים שנוספה לקובץ הצהרת הייבוא הבאה:

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 באחת מהאפשרויות הבאות:

1. בסביבת הפיתוח המשולבת, לוחצים על הלחצן Run.
2. מריצים את הפקודה flutter run משורת הפקודה.

אמורה להופיע מפה עם סמן שממוקד בסידני, בחוף המזרחי של אוסטרליה, בדומה לתמונה בדף הזה.

פתרון בעיות

• אם המפה לא מוצגת, ודאו שקיבלתם מפתח API והוספתם אותו לאפליקציה.
• אם השתמשתם במזהה החבילה של iOS כדי להגביל את מפתח ה-API, עורכים את המפתח ומוסיפים את מזהה החבילה של האפליקציה: com.google.examples.map-with-marker.
• מוודאים שיש חיבור Wi-Fi או חיבור GPS טוב.
• אתם יכולים להשתמש ב-Flutter DevTools כדי להציג יומנים ולפתור באגים באפליקציה.
• מידע נוסף על הפעלת אפליקציה ב-Flutter

4. הסבר על הקוד

הקוד הזה זמין ב-GitHub.

1. מייבאים את החבילות הנדרשות ומפעילים את האפליקציה.

      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. יוצרים מפה שממוקדת בסידני, אוסטרליה.

   class _MyAppState extends State<MyApp> {
      
      late GoogleMapController mapController;
      
      final LatLng _center = const LatLng(-33.86, 151.20);
      
      void _onMapCreated(GoogleMapController controller) {
         mapController = controller;
      }

3. מוסיפים את הווידג'טים הנדרשים כדי להציג מפה באפליקציה.

   @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. מוסיפים את הווידג'טים של הסמנים כדי להוסיף את הווידג'ט לאפליקציה.

      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. מוסיפים חלון מידע לסמן.

         const Marker(
               markerId: const MarkerId("Sydney"),
               position: LatLng(-33.86, 151.20),
               infoWindow: InfoWindow(
                  title: "Sydney",
                  snippet: "Capital of New South Wales",
               ), // InfoWindow
         ), //Marker
         ...

   כברירת מחדל, החבילה של מפות Google ל-Flutter מציגה את התוכן של חלון המידע כשהמשתמש מקייש על סמן. אם אתם מסתפקים בהתנהגות ברירת המחדל, אין צורך להוסיף למסמן מאזין לקליק.

מעולה! יצרתם אפליקציית Flutter שמציגה מפת Google עם סמן שמציין מיקום מסוים ומספקת מידע נוסף בחלון מידע. למדתם גם איך להשתמש בחבילה של מפות Google ל-Flutter.