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

מבוא

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

קבלת הקוד

משכפלים או מורידים את מאגר הדוגמאות של 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. ב-IDE, לוחצים על הלחצן Run
2. משורת הפקודה, מריצים את הפקודה flutter run.

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

פתרון בעיות

• אם לא מוצגת מפה, צריך לוודא שהשגתם מפתח API והוספתם אותו לאפליקציה.
• אם השתמשתם במזהה חבילה של iOS כדי להגביל את מפתח ה-API, עורכים את המפתח כדי להוסיף את מזהה החבילה של האפליקציה: com.google.examples.map-with-marker.
• מוודאים שיש חיבור Wi-Fi או GPS טוב.
• אפשר להשתמש בכלי הפיתוח של Flutter כדי להציג יומנים ולנפות באגים באפליקציה.
• מידע נוסף על הפעלת אפליקציית 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 Maps for Flutter מציגה את התוכן של חלון המידע כשהמשתמש מקיש על סמן. אם אתם מרוצים מההתנהגות שמוגדרת כברירת מחדל, אין צורך להוסיף click listener לסמן.

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