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

مقدمة

يتضمّن هذا الدليل التوجيهي طريقة إضافة "خريطة 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

أضِف تطبيق GoogleMap المصغّر كنص ضمن التطبيق المصغّر Scaffold.

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.

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

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

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