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

מבוא

במדריך הזה תלמדו איך להוסיף מפת 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.