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

מבוא

במדריך הזה מוסבר איך להוסיף מפת 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 ל-Flutter' מוצג התוכן של חלון המידע כשהמשתמש מקיש על סמן. אין צורך להוסיף אוזן קליקים עבור הסמן אם רוצים להשתמש בהתנהגות ברירת המחדל.

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