إضافة خريطة باستخدام محدّد موقع

مقدمة

يوضّح لك هذا الدليل التعليمي كيفية إضافة خريطة 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. من بيئة تطوير البرامج المتكاملة، انقر على الزر Run.
2. من سطر الأوامر، شغِّل flutter run.

من المفترض أن تظهر لك خريطة تتضمّن علامة في منتصف سيدني على الساحل الشرقي من أستراليا، على غرار الصورة الواردة في هذه الصفحة.

تحديد المشاكل وحلّها

• إذا لم تظهر لك خريطة، تأكَّد من حصولك على مفتاح واجهة برمجة التطبيقات وإضافته إلى التطبيق.
• إذا استخدمت معرّف حزمة iOS لتقييد مفتاح واجهة برمجة التطبيقات، عدِّل المفتاح لإضافة معرّف الحزمة للتطبيق: 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.